Изменение значения вложенного поля в окончательной форме реакции

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