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

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)。