REACT-NATIVE：如何在 Flatlist 中引用文本输入。单独返回最后一项答案

【问题标题】：REACT-NATIVE: how to reference textinput in Flatlist. Returning for last item aloneREACT-NATIVE：如何在 Flatlist 中引用文本输入。单独返回最后一项
【发布时间】：2020-04-28 14:39:09
【问题描述】：

我在 Flatlist 的每个元素中都有 2 个 TextInput。根据在第一个 TextInput 中输入的数字，第二个 TextInput 的值会更改为该特定元素，反之亦然。虽然如果我在 Flatlist 中输入第一个元素的第一个 TextInput，最后一个元素的第二个 TextInput 会改变。

事实上，无论 Flatlist 中有多少元素，最后一个元素的 TextInputs 值都会改变

注意：在我的代码中使用了这个引用，但没有运气create a unique ref for each element while renderItem() in a SectionList/ FlatList react native

这是我的代码：




  constructor(props) {
      super(props);
      this.state = {

        passedDisputesArray: passedDisputesArray,
          disputeQuantityArray: [],
            disputeAmountsArray: [],

    };

      this.textInputDisputeQuantity = {};
    this.textInputDisputeAmount = {};
    }


    render() {
      super.render(this);
      return (
        <View style={styles.container}>
          <KeyboardAwareFlatList
            data={this.state.passedDisputesArray}
            extraData={this.state}
            windowSize={11}
            initialNumToRender={10}
            renderItem={this.renderpassedDisputesArrayList}
            keyExtractor={(item, index) => item.transactionId}
            ListFooterComponent={this.renderFooter.bind(this)}
            onEndReached={this.LoadMoreLineData}
            onEndReachedThreshold={1}
          />
        </View>
      )
    };

    renderpassedDisputesArrayList = ({ item, index }) => {
      return (
        <TouchableOpacity>
          <TextField
            ref={ref => { this.textInputDisputeQuantity[item.transactionId] = ref }}
            mode='flat'
            label='Dispute Quantity'
            placeholder="Enter Dispute Quantity"
            keyboardType='number-pad'
            value={this.state.disputeQuantityArray[index]}
            onChangeText={(text) => {
              console.log("text quantity: " + text + " quantity: " + item.quantity);
              if (parseFloat(text) > parseFloat(item.quantity)) {
                this.makeToast("Dispute quantity cannot be greater than invoiced quantity", true);
                let { disputeQuantityArray, disputeAmountsArray } = this.state;
                disputeQuantityArray[index] = "";
                disputeAmountsArray[index] = "";
                this.textInputDisputeQuantity[item.transactionId].clear();
                this.setState({ disputeQuantityArray, disputeAmountsArray, });
              }
              else {
                let { disputeQuantityArray, disputeAmountsArray } = this.state;
                disputeQuantityArray[index] = text;
                disputeAmountsArray[index] = text * item.unitPrice;
                this.setState({ disputeQuantityArray, disputeAmountsArray });
                this.textInputDisputeAmount[item.transactionId].setValue(this.state.disputeAmountsArray[index]);
              }
              console.log("disputeQuantityArray: ", this.state.disputeQuantityArray);
              console.log("disputeAmountsArray: ", this.state.disputeAmountsArray);
            }}
          />
        </TouchableOpacity>
      )
    };

【问题讨论】：

标签： react-native

【解决方案1】：

兄弟，为您的 textInput 设置任何 uniq 键引用，并且不要使用状态来更新值。您可以在 textInputLayout 的值中使用动态值作为道具。

像这样跟随：为每一行提供独特的道具，如钥匙。例如。键 = {索引}

renderpassedDisputesArrayList = ({ item, index }) => {
  return (
    <TouchableOpacity>
      <TextField
        key={index}
        ref={(ref) => {
          this.textInputDisputeQuantity[item.transactionId] = ref;
        }}
        mode="flat"
        label="Dispute Quantity"
        placeholder="Enter Dispute Quantity"
        keyboardType="number-pad"
        value={this.state.disputeQuantityArray[index]}
        onChangeText={(text) => {
          console.log("text quantity: " + text + " quantity: " + item.quantity);
          if (parseFloat(text) > parseFloat(item.quantity)) {
            this.makeToast(
              "Dispute quantity cannot be greater than invoiced quantity",
              true
            );
            let { disputeQuantityArray, disputeAmountsArray } = this.state;
            disputeQuantityArray[index] = "";
            disputeAmountsArray[index] = "";
            this.textInputDisputeQuantity[item.transactionId].clear();
            this.setState({ disputeQuantityArray, disputeAmountsArray });
          } else {
            let { disputeQuantityArray, disputeAmountsArray } = this.state;
            disputeQuantityArray[index] = text;
            disputeAmountsArray[index] = text * item.unitPrice;
            this.setState({ disputeQuantityArray, disputeAmountsArray });
            this.textInputDisputeAmount[item.transactionId].setValue(
              this.state.disputeAmountsArray[index]
            );
          }
          console.log(
            "disputeQuantityArray: ",
            this.state.disputeQuantityArray
          );
          console.log("disputeAmountsArray: ", this.state.disputeAmountsArray);
        }}
      />
    </TouchableOpacity>
  );
};

【讨论】：

【解决方案2】：

我通过用替换所有地方来解决这个问题

this.textInputDisputeQuantity[item.transactionId]

到

this.textInputDisputeQuantity[index]

【讨论】：