以反应最终形式更改嵌套字段的值

时间:2018-09-06 07:59:20

标签: javascript reactjs react-final-form

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

这基本上是地址形式,在选择Suburb时,我想更改postcodestate。 地址还是形式上的嵌套对象。 我的数据集看起来像:-

{
  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);

3 个答案:

答案 0 :(得分:3)

final-form中的嵌套字段以点符号引用。

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

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

答案 1 :(得分:0)

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

我通过如下更改mutator方法(将newValue用作第一个参数数组中的第二个arg)来更正了它。 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));
};

答案 2 :(得分:-2)

如果可以的话,您可以尝试一下

state = {
  json : {
    name: 'xyzx',
    address: {
    suburb: 'xx',
  },
}

this.state.json.address.suburb = "yy";
this.setState({json : this.state.json});