Используйте Select.Creatable с React Final Form

Question

У нас есть форма React Final Form, и мы хотим выбрать и создать способное поле в этой форме.

Как я могу использовать такой компонент внутри реагирующей окончательной формы.

В настоящее времяЯ попытался использовать Select.Creatable ofact-select внутри формы, но как только я выбрал что-то из выпадающего списка и обновил состояние, форма становится чистой, т.е. возвращается в исходное состояние.

Пожалуйста, помогите!

Answer 1

All React Final Form выполняет управление значениями формы.Чтобы использовать какой-либо сторонний компонент, все, что вам нужно, это принять value, которую дает вам React Final Form, и изменить его с помощью обратного вызова onChange, который дает вам React Final Form.

Посмотрите на "компоненты адаптера », определенные в качестве руководства Сторонние компоненты .

Answer 2

Вам необходимо обновить список опций самостоятельно.В моем примере я использовал состояние компонента.

Сначала создайте состояние с начальными параметрами

  const [localOptions, setOptions] = useState(props.options);

А затем обновите список и выбранные значения на onCreateOption

  const onCreateOption = (value: string) => {
    setOptions([...(localOptions || []), { label: value, value }]);
    input.onChange([...input.value, value]);
  };

В моем случае у меня есть опции в форме { label: "", value: "" } и выбранные поля как массив строк.

Если вы не можете выбрать несколько опций, просто используйте значение без выбранного в данный моменттакие поля как input.onChange(value)