react-final-form - react-dates集成

Question

我不能集成react-dates和react-final-form。

如果我使用表单中的change(名称，值)函数将onChange回调添加到react-dates的组件中，则名称不会保存到表单状态(我认为这是因为在使用change之前必须注册该字段)。

是否可以手动注册字段？

编辑:我找到了一种方法，添加一个隐藏字段，但我不喜欢这样……

编辑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>