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

Question

I believe this should be something simple but I find it difficult to implement, and all the answers I've seen so far doesn't really tackle this specific problem. I have a state like this.

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

I want to update the elements of the options array using onChangeText/onChange.

My code

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

Please how can I achieve this?

Answer 1

You can do that like this

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 */ })),
  });
};

Or use library like Immer . And then you just modify specific filed.

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