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

Question

我认为这应该很简单，但我发现很难实现，到目前为止我看到的所有答案都不能真正解决这个特定的问题。我有这样的状态。

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

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

我的代码

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

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

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