版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/YanceChen2013/article/details/76863400
问题:要在一个输入框中同时实现输入和赋值操作,当页面是从前一个页面跳转时,实现带入值;当输入内容时,实现实时搜索和内容展示功能?
解决思路,当页面进行跳转时,直接利用属性传值,搜索展示时,增加一个判断变量,决定应该利用那个组件
解决方法和代码
1、当用户点击已经拥有的内容数据时,调用点击方法,同时调用数据接口和状态机中变量值得改变,以保证能够在确认订单的时候,订单数据内容准确:
//点击事件
buyClickAction(rowData){
console.log('选中的数据内容',rowData);
var newData = this.state.orderData;
newData.name = rowData.name + ' ' + rowData.mark;
newData.price = rowData.price;
newData.num = rowData.default;
newData.id = rowData.id;
this.setState({
marketData: rowData,
orderData: newData,
isSearch: true,
});
//获取五档图数据
this.loadFiveBuyRangeData(rowData);
this.loadFiveSellRangeData(rowData);
},
2、当文本框中内容改变时,调用属性方法,在属性方法中实现内容的搜索功能:
<TextInput style={styles.textInputStyle}
defaultValue={this.props.buyData.name + ' ' + this.props.buyData.mark}
placeholder='发行人姓名/代码'
placeholderTextColor='black'
onChangeText={this.props.nameTextChange}
autoCapitalize='none'
clearButtonMode='while-editing'></TextInput>
同时要更新状态机中的isSearch的值,以保证组件状态的改变,能够显示出搜索的结果内容:
//文本框中内容改变
nameTextChange(newName){
var newData = this.state.orderData;
newData.name = newName;
this.setState({
orderData: newData,
isSearch: false,
});
this.getSearchDataFromNet(newName);
},
另外要将搜索到的结果通过属性传值,传递到子组件中:
<View style={styles.topViewStyle}>
<Buy buyData={this.state.marketData}
buyClick={this.buyClick}
nameTextChange={this.nameTextChange}
priceTextChange={this.priceTextChange}
numTextChange={this.numTextChange}
isSearch={this.state.isSearch}
searchData={this.state.searchData}
buyClickAction={this.buyClickAction}></Buy>
3、点击购买按钮时要弹出确认订单内容界面:
//点击购买按钮事件
buyClick(){
if (this.state.marketData.name) {
let isShow = this.state.show;
this.setState({
show: !isShow,
});
}else {
Alert.alert('请输入发行人姓名/代码!');
}
},
通过show属性决定界面的显隐状态:
<MakeSureOrder
show={this.state.show}
orderData={this.state.orderData}
states={'购买'}
backClick={this.backClick}></MakeSureOrder>
4、搜索属性控制的组件状态的改变,决定是加载显示组件还是listView组件:
{
this.props.isSearch ?
<View style={styles.viewStyle}>
<View style={styles.contentViewStyle}>
<TouchableOpacity style={styles.leftImageStyle}
onPress={this.priceSubtract}>
<Image source={require('../img/Market/jianhao.png')}></Image>
</TouchableOpacity>
<TextInput style={styles.textInputStyle}
defaultValue={this.props.buyData.price}
onChangeText={this.props.priceTextChange}
placeholder='购买价格(元)'
placeholderTextColor='gray'
autoCapitalize='none'
clearButtonMode='while-editing'
keyboardType='number-pad'></TextInput>
<TouchableOpacity style={styles.rightImageStyle}
onPress={this.priceAdd}>
<Image source={require('../img/Market/jiahao.png')}></Image>
</TouchableOpacity>
</View>
<View style={styles.contentViewStyle}>
<TouchableOpacity style={styles.leftImageStyle}
onPress={this.numSubtract}>
<Image source={require('../img/Market/jianhao.png')}></Image>
</TouchableOpacity>
<TextInput style={styles.textInputStyle}
defaultValue={this.props.buyData.default}
onChangeText={this.props.numTextChange}
placeholder='购买数量(份)'
placeholderTextColor='gray'
autoCapitalize='none'
clearButtonMode='while-editing'
keyboardType='number-pad'></TextInput>
<TouchableOpacity style={styles.rightImageStyle}
onPress={this.numAdd}>
<Image source={require('../img/Market/jiahao.png')}></Image>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.buyButtonStyle}
onPress={this.props.buyClick}>
<Text style={styles.buyButtonTextStyle}>购买</Text>
</TouchableOpacity>
</View>
:
<View>
<ListView
dataSource={this.state.dataSource.cloneWithRows(this.props.searchData)}
renderRow={this.renderRow}
enableEmptySections={true}
>
</ListView>
</View>
}
5、实现的过程中一些值得传递,状态的改变,有一部分逻辑需要细细思考一下,好好考量一下!TextInput中无法直接赋值,所以页面跳转和点击出现的值通过defaultValue
这一属性确定,但是当用户点击加减号的时候,状态值就无法改变了,这一内容还需要好好修改一下!