关于购买界面实现思路

版权声明：本文为博主原创文章，未经博主允许不得转载。 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 这一属性确定，但是当用户点击加减号的时候，状态值就无法改变了，这一内容还需要好好修改一下！