REACT-NATIVE: как ссылаться на ввод текста в Flatlist Возврат только за последний товар

Question

У меня есть 2 TextInput в каждом элементе в Flatlist. на основе числа, введенного в 1-м TextInput, значение 2-го TextInput этого конкретного элемента изменяется, и наоборот. хотя, если я введу номер 1-го TextInput 1-го элемента в Flatlist, 2-й TextInput последнего элемента будет изменен.

Влияет, независимо от количества элементов в Flatlist, последние значения TextInputs элементов будут изменены

Примечание: использовал эту ссылку в моем коде, но не повезло создайте уникальный ref для каждого элемента, в то время как renderItem () в Реакция нативного SectionList / FlatList

Вот мой код:

  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>
      )
    };

Answer 1

Я решил это, заменив все места на

this.textInputDisputeQuantity[item.transactionId] 

на

this.textInputDisputeQuantity[index]

Answer 2

Bro, установите любую ссылку uniq на ваш textInput и не используйте состояние для обновления значения. вы можете использовать значения Dynami c в качестве реквизитов внутри значения вашего 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>
  );
};