关于购买界面实现思路

港控/mmm° 2022-06-10 02:08 162阅读 0赞

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

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

### 解决方法和代码 ###

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、当文本框中内容改变时，调用属性方法，在属性方法中实现内容的搜索功能：

同时要更新状态机中的isSearch的值，以保证组件状态的改变，能够显示出搜索的结果内容：

//文本框中内容改变
      nameTextChange(newName){
        var newData = this.state.orderData;
        newData.name = newName;
        this.setState({
          orderData: newData,
          isSearch: false,
        });
        this.getSearchDataFromNet(newName);
      },

另外要将搜索到的结果通过属性传值，传递到子组件中：

3、点击购买按钮时要弹出确认订单内容界面：

//点击购买按钮事件
      buyClick(){
        if (this.state.marketData.name) {
          let isShow = this.state.show;
          this.setState({
            show: !isShow,
          });
        }else {
          Alert.alert('请输入发行人姓名/代码!');
        }
      },

通过show属性决定界面的显隐状态：

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