javascript - 以 react 最终形式更改嵌套字段的值

Question

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

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

{
  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"
/>