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

Posted 2021-04-04

我有一个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，以便您可以看到：

答案

请参阅...您创建的问题不是那么明显我们需要查看您调用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}
                  />
                );
              })}