在 react 最终形式中更改嵌套字段的值

Question

我们正在使用 React Final Form 库，并希望在用户选择时更改嵌套字段的值。

它基本上是地址形式，在选择Suburb时，我想更改postcode和state。 地址又是表单中的嵌套对象。 我的数据集看起来像：-

{
name: 'xyzx',
address: {
suburb: 'xx',
},
}

我正在传递以下突变器

export const changeValueMutator: Mutator = ([name]: string[], state: MutableState, { changeValue }: Tools) => {
console.log(state, name);
changeValue(state, name, value => (value));
};

并将其称为

this.props.changeValue('address.suburb', item.suburb);

Answer 1

final-form中的嵌套字段使用点表示法引用。

https://github.com/final-form/final-form#field-names

<Field
name="address.suburb"
component="input"
type="text"
placeholder="Suburb"
/>

Answer 2

我从库中的一个测试用例中找到了答案

我通过更改我的突变器方法更正了它，如下所示(将 newValue 作为第一个参数数组中的第二个参数(。 https://github.com/final-form/react-final-form/blob/379755c24570bf0e1cedaa2f6783e642d2e2b369/src/ReactFinalForm.d.test.tsx#L69

export const changeValueMutator: Mutator =
([name, newValue]: string[], state: MutableState, { changeValue }: Tools) => {
console.log(state, name);
changeValue(state, name, value => (newValue));
};

Answer 3

你可以试试这个，如果

state = {
json : {
name: 'xyzx',
address: {
suburb: 'xx',
},
}
this.state.json.address.suburb = "yy";
this.setState({json : this.state.json});