Реакция-окончательная форма - реакция-интеграция дат

Question

Я не могу объединить даты реакции с реакцией окончательной формы.

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

Можно ли вручную зарегистрировать поле?

редактировать: я нашел способ, добавив скрытое поле, но мне это не нравится...

редактировать 2: добавление формы теста:

Answer 1

Для этого вы должны использовать форму из FormRenderProps.

「Form.change」

<Form
  onSubmit={onSubmit}
  initialValues={{ a: "a" }}
  render={({
    form, // Focus here and removed 「change」
    handleSubmit,
    reset,
    submitting,
    pristine,
    values
  }) => (
    <form onSubmit={handleSubmit}>
      <div>
        <label>A Field</label>
        <Field name="a" component="input" type="text" />
      </div>
      <div>
        <label>A not Field</label>
        <input
          name="a"
          type="text"
          onChange={event => {
            console.log("changing A to", event.target.value);
            form.change("a", event.target.value); // Use form.change instead of change
          }}
        />
      </div>
      <div>
        <label>B not Field</label>
        <input
          name="b"
          type="text"
          onChange={event => {
            console.log("changing b to", event.target.value);
            form.change("b", event.target.value); // Use form.change instead of change
          }}
        />
      </div>
      <div className="buttons">
        <button type="submit" disabled={submitting || pristine}>
          Submit
        </button>
        <button
          type="button"
          onClick={reset}
          disabled={submitting || pristine}
        >
          Reset
        </button>
      </div>
      <pre>{JSON.stringify(values, 0, 2)}</pre>
    </form>
  )}
/>

Answer 2

Вы можете обернуть его внутри Field чтобы информировать государство окончательной формы о b поле:

<Field
  name="b"
  render={() => {
    return (
      <input
        type="text"
        onChange={event => {
          console.log("changing b to", event.target.value);
          change("b", event.target.value);
        }}
      />
    );
  }}
/>

в приведенном выше случае вам не нужно указывать специальный обработчик onChange:

<Field
  name="b"
  render={({ input }) => {
    return <input type="text" {...input} />;
  }}
/>

или даже

<Field name="b" component="input" />

Answer 3

Это сработало для меня:

      import { SingleDatePicker } from 'react-dates'


// set a state
const [ date, setDate ] = useState(null);


// inside your render inside the react-final-form component
<Field name="date">
    {({ input, meta }) => (
        <>
            <SingleDatePicker
                readOnly
                onOutsideClick={true}
                numberOfMonths={1}
                focused={focused}
                date={date}
                onDateChange={value => {
                    // you need to set the value to a formatted date
                    // because react-dates returns a moment object as the value
                    input.onChange(value.format('YYYY-MM-DD'))
                    setDate(value);
                }}
                onFocusChange={({ focused }) => {
                    setFocused(focused);
                }}
            />
        </>
    )}
</Field>