web-dev-qa-db-ja.com

reduxフォームのフィールドに値を設定します

ドロップダウンフィールドとテキストフィールドを持つreduxフォームがあります。ドロップダウンの変更時に、他のフィールドを更新する必要があります。他のフィールドはカスタムコンポーネントの例を使用しています

だから構造は似ています。 1.フォームを持つコンポーネント2.フィールドコンポーネント。

今、私はグーグルで検索し、フィールドを更新するためのいくつかのことを見つけましたが、それを行うことはできません。試したこと1.以下のような値をフィールドに状態を追加します。動作しません。

<Field name="accountno" value="this.state.accountno" component={InputText} placeholder="Number" />

  1. ディスパッチを試みましたが、使用できませんでした。プロペラタイプがディスパッチされていない場合のエラーの取得

    this.props.dispatch（change（ 'form'、 'accountno'、 'test value'））;

  2. This.props.fieldsを試しましたが、propsタイプのフィールドは試しませんでした。

2または3を使用して動作するはずですが、それらを追加する場所を見つけることができません。これらまたは他の方法を使用する方法を教えてください。

reactjsreact-reduxredux-form
19
Rahul Tailwal

redux-formを使用する場合、値をフィールドに直接設定する必要はありません。メソッドinitializeを使用してフォームに入力できます。または、initialValuesをreduxに渡すオブジェクトのプロパティとして使用して、状態を小道具にマッピングします。他の方法は、redux-formから関数changeを使用して値を個別に設定することです。動作させるには、react-reduxのconnectでコンポーネントをラップする必要があります。 dispatchメソッドを小道具に埋め込みます。

import React, { Component } from 'react';
import { reduxForm, Field, change } from 'redux-form';
import { connect } from 'react-redux';

class Form extends Component {
  componentDidMount() {
    this.props.initialize({ accountno: 'some value here' });
    // set the value individually
    this.props.dispatch(change('myFormName', 'anotherField', 'value'));
  }

  render() {
    return (
      <form onSubmit={...}>
        ...
        <Field name="accountno" component={InputText} placeholder="Number" />
        <Field name="anotherField" component={InputText} />
      </form>
    )
  }
}

Form = reduxForm({ 
  form: 'myFormName' 
})(Form);

export default connect(state => ({ 
  // alternatively, you can set initial values here...
  initialValues: {
    accountno: 'some value here'
  } 
}))(Form);
22
Julio Betta

この問題にも思いつきました。解決策は、juliobettaの答えのようにinitialValuesを使用することですが、重要なのは、値をstate.blahなどの変数に設定することです。

次に、状態が変更されたときにフィールドが更新されるように、 enableReinitializeをtrueに設定 する必要があります。

export default connect(state => ({ 
  initialValues: {
    accountno: state.accountno,
  },
  enableReinitialize: true,
}))(Form);

これで、state.accountnoを変更するたびに、フォームフィールドが更新されます。

8
Malvineous