Question

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

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

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

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

编辑2：添加测试表单：

Answer 1

您可以将其包含在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 2

您必须使用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 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>

react-final-form - react-dates integration

3 个答案: