reactjs - 反应最终形式。如何从组件状态设置字段值

Question

我正在尝试将日期选择器添加到我的论坛。问题是日期选择器只能通过组件状态工作。意味着选择的值进入状态。

我正在尝试强制最终表单字段使用该状态值。但我似乎无法弄清楚。

基本上试图这样做：

<Field name="field1" value={this.state.date}/>

Answer 1

嗯，我假设您不想设置最终用户可以更改的初始值。如果不是这种情况，请告诉我。

如果您不想强制一个值，请不要使用字段。React-final-form 维护状态，因此您不必这样做。

要设置初始值，请使用 Form 控件中的 initialValues 属性。

 <Form
      onSubmit={onSubmit}
      initialValues={{ field1: "2019-02-02" }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>Feild One</label>
            <Field name="field1" component="input" type="date" />
          </div>
          .
          .
          .

Answer 2

你的意思是你已经有一个日期选择器组件，你希望 react-final-form 能够访问该组件的状态？如果是这种情况，您是否考虑过使用 Field 组件的 render-props 版本？

在您的表单中，如下所示：

<Field name="datePickerField">
  {({ input }) => (
    <DatePickerComponent
      onChange={date => input.onChange(date)}
    />
  )}
</Field>

然后在 DatePickerComponent 内部 - 您在其中处理所选日期的设置状态，您还可以调用props.onChange(date).