FlatList问题中带有TextInput的动态表单

实际行为:

我正在flatList中加载动态表单,并且应该根据条件在TextInputs中添加几行。例如,我有一个复选框。当我选中复选框时,我必须添加一个下拉列表和两个TextInput,而当我取消选中该复选框时,必须删除这三个。我的问题是,当我选中复选框并在TextInputs中输入一些值,然后取消选中复选框时,最后一个TextInput中的值将被分配给与这些条件无关的另一个TextInput。

预期的行为:

在取消选中复选框时,不应将最后一个TextInput值分配给与复选框条件无关的另一个TextInput。请提出建议。预先感谢。

其他资源:

这是我的TextInput代码:

 _onChangeText(e,item,index) {
    console.log("abc123 ",item);
    let count = "false";
    let note;
    if (this.state.inputsValues.length === 0 && item.blocks.question !== undefined) {
        if (item.blocks.question.prompt !== "Notes") {
            note = {
                note: e.nativeEvent.text.replace(/\n/g,''),id: item.blocks.question.prompt
            };
        } else {
            note = {
                note: e.nativeEvent.text.replace(/\n/g,id: item.blocks.block_pos
            };
        }
        this.setState({ inputsValues: [...this.state.inputsValues,note] },() => {
            console.log("length === 0",this.state.inputsValues);
        });
    } else {
        this.state.inputsValues.map((res,idx) => {
            if (item.blocks.question !== undefined && res.id === item.blocks.question.prompt) {
                res.note = e.nativeEvent.text.replace(/\n/g,'');
                count = "true";
            }
        });
        if (count === "false") {
            if (item.blocks.question.prompt !== "Notes") {
                note = {
                    note: e.nativeEvent.text.replace(/\n/g,id: item.blocks.question.prompt
                };
            } else {
                note = {
                    note: e.nativeEvent.text.replace(/\n/g,id: item.blocks.block_pos
                };
            }
            this.setState({ inputsValues: [...this.state.inputsValues,() => {
                // console.log("gvrtgrtgt",this.state.inputsValues);
            });
        }
    }
}
<NBTextField
itemStyles={[styles.itemStyles,{ height: width / 6 }]}
value={inputsValues[index] !== undefined && inputsValues[index].note}
onEndEditing={e => this._onChangeText(e,item)}
onChangeText={this.getInputvalue}
onSubmitEditing={() => Keyboard.dismiss()}
inputStyles={[styles.inputStyles,{ height: width / 6 }]}
placeholder="Enter here"
/>

环境:

  

反应性:0.61.1

屏幕截图:

FlatList问题中带有TextInput的动态表单

ygbyyy 回答:FlatList问题中带有TextInput的动态表单

以下代码在mycase中对我有用

 _onChangeText(e,item,index) {
    if (item.blocks.block_type === 'question') {
      this.state.mainData[index].answer = e.nativeEvent.text;
      this.setState({
        mainData: this.state.mainData,});
    }
  }
   <NBTextField
       itemStyles={styles.itemStyles}
       value={item.answer}
       onEndEditing={e => this._onChangeText(e,index)}
       onChangeText={e => this.getInputValue(e,index)}
       onSubmitEditing={() => Keyboard.dismiss()}
       inputStyles={styles.inputStyles}
      />

本文链接:https://www.f2er.com/3167126.html

大家都在问