关于购买界面实现思路

问题：要在一个输入框中同时实现输入和赋值操作，当页面是从前一个页面跳转时，实现带入值；当输入内容时，实现实时搜索和内容展示功能？

解决思路，当页面进行跳转时，直接利用属性传值，搜索展示时，增加一个判断变量，决定应该利用那个组件

解决方法和代码

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 这一属性确定，但是当用户点击加减号的时候，状态值就无法改变了，这一内容还需要好好修改一下！