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

Question

we are using React Final Form library, and want to change the value of nested field on user's selection.

It is basically Address form, where on selection of Suburb , I want to change postcode and state . address is again a nested object in form. My Dataset look like :-

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

I am passing following mutator

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

and calling it as

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

Answer 1

Nested fields in final-form are referenced with dot notation.

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

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

Answer 2

I found the answer from one of the test case in library

I corrected it by changing my mutator method as below (take newValue as second arg in first parameter array). 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

You can try this, if

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

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