Question

我有一个React Native表单，通过单击带有此功能的按钮，我可以在表单中添加Input UI。这使我可以即时生成它。的代码是这样。

addClick() {
    this.setState(prevState => ({ values: [...prevState.values, ""] }));
    console.log(this.values[0].name);
}

该部分效果很好，但是我在从动态输入中提取数据并将其添加到数组时遇到了问题。到目前为止，我已经尝试过了

setVal = value => {
    const values = this.state.values[0];
    if (values[0].name === "" || values[0].description === "") return;

    [...this.state.values, value];

    this.setState(values);
    console.log(values);
};

如何正确组织状态，以便可以添加所需的任意数量的输入，完成后可以更新状态，并访问列表组件中的新数据？

如何将状态更新为新的阵列？目前，this.state仅在顶部显示初始状态。

我错过了几件事

请查看完整的代码沙箱HERE，以便您看到：

Answer 1

看看...您创建的问题不是很明显，我们需要看看您在哪里调用setVal（）函数，但是....

我认为，如果直接从状态数组而不是从<input/>变体渲染const x = []，将使您更加自在。因为看起来您想要一个动态视图，并且在这种情况下，您将需要从状态绑定循环数量。所以：

this.state = {
  x: [0,1,2,3,4]
}

并在渲染中：

   {this.state.x.map(x => {
                return (
                  <TextInput
                    placeholder={`name${x}`}
                    value={values[x.toString()]}
                    handleBlur={() => handleBlur(x.toString())}
                    onChangeText={handleChange(x.toString())}
                    style={styles.input}
                  />
                );
              })}

如何将动态输入值添加到本地状态以进行检索

1 个答案: