web-dev-qa-db-ja.com

React最終フォーム。コンポーネントの状態からフィールド値を設定する方法

日付ピッカーをフォーラムに追加しようとしています。問題は、日付の選択がコンポーネントの状態でのみ機能することです。選択した値が状態になることを意味します。

最終的なフォームフィールドにその状態値を使用するように強制しようとしています。しかし、私はそれを理解することができないようです。

基本的にこれにしようとしています：

<Field name="field1" value={this.state.date}/>
reactjsreact-final-formfinal-form
4
jdstrong95

うーん、エンドユーザーが変更できる初期値を設定しないと仮定します。そうでない場合はお知らせください。

値を強制したくない場合は、フィールドを使用しないでください。 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>
          .
          .
          .

Edit ???? React Final Form - Simple Example

3
Mke Spa Guy

日付ピッカーコンポーネントが既にあり、react-final-formがそのコンポーネントの状態にアクセスできるようにしたいですか？その場合、Fieldコンポーネントのrender-propsバージョンの使用を検討しましたか？

あなたのフォームでは次のようになります：

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

次に、DatePickerComponent内-選択した日付の設定状態を処理する場所で、props.onChange(date)も呼び出します。

0
S. Taylor