reactjs - react-final-form - 反应日期集成

Question

我无法将 react-dates 与 react-final-form 集成。

如果我使用表单中的 change(name, value) 函数向 react-dates 的组件添加 onChange 回调，则名称不会保存到表单状态（我想是因为必须在使用更改之前注册该字段）。

是否可以手动注册一个字段？

编辑：我找到了一种方法，添加了一个隐藏字段，但我不喜欢那样......

编辑2：添加测试表格：

Answer 1

您必须使用 FormRenderProps 中的表单来执行此操作。

「form.change」</p>

<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

这对我有用：

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>

Answer 3

您可以将其包装在内部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" />