如何在 React 中使用带有钩子的 onChange 更新数组元素？

Posted 2023-02-16

【中文标题】如何在 React 中使用带有钩子的 onChange 更新数组元素？

【英文标题】：How do I update elements of array using onChange with hooks in React?

【发布时间】：2022-01-17 17:37:54

【问题描述】：

我认为这应该是一件简单的事情，但我发现它很难实现，而且到目前为止我看到的所有答案并没有真正解决这个具体问题。 我有这样的状态。

const [formFields, setFormFields ] = useState(
formTitle: '',
field: [
    name: '', options: ['optionA', 'optionB', 'OptionC'] ,
])

我想使用 onChangeText/onChange 更新 options 数组的元素。

我的代码

field.options.map((option) => (
<TextInput value=option 
onChangeText=(e) => e
/>))

请问我怎样才能做到这一点？

【参考方案1】：

你可以这样做

const [formFields, setFormFields] = useState(
  formTitle: "",
  field: [ name: "", options: ["optionA", "optionB", "OptionC"] ],
);

const onChangeHandler = (e) => 
  setFormFields(
    ...formFields,
    field: formFields.field.map((field) => ( ...filed, options: /*your change */ )),
  );
;

或者使用像Immer 这样的库。然后你只需修改特定的文件。

const onChangeHandler = (e) => 
  setFormFields(
    produce(formFields, (draft) => 
      draft.field[0].options = /*your change */;

      // Or all the fields
      draft.field.forEach((field) => 
        field.options = /*your change */;
      );
    )
  );
;

【讨论】：

感谢您的帮助。我的问题是，如何检测选项数组中的哪个元素已更改并适当更新？我知道我应该使用该元素的索引来做到这一点，但我可以想到如何实现它。例如，选项数组中的元素都在 TextInput 中呈现。我希望能够通过编辑呈现'optionB'的TextInput来使用onChange将'optionB'更改为'something'。请问我该怎么做？

我不知道你的 TextInput 组件到底是做什么的。但是，如果您想知道事件处理程序中的选项索引，则可以采用闭包。 field.options.map((option, i) => ( <TextInput value=option onChangeText=(i) => getEventHandler(i) />)) 然后修改我对const getEventHandler = i => e => // rest is the same的回答中的函数

如果您的字段值不是动态的或依赖于数据库中的动态值，您可以尝试 Formik - formik.org。它抽象了更新和验证表单字段的复杂性。