关于购买界面实现思路

Posted 2022-12-06 YanceChen2013

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

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

解决方法和代码

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