web-dev-qa-db-ja.com

onchange select時に、redux-formでカスタムアクションをディスパッチします

与えられたカスタムコンポーネント：

export const RenderDropDown = (props) => {
    const {values, input, label, type, meta: {touched, error, active}} = props;

    var options = function (value, index) {
        return <Option key={index}
                       value={value} />
    };

    return(
        <div>
        <select {...input}>
            <option value="">--- Select a nationality ---</option>
            {values.map(options)}
        </select>
        </div>
    )
}

Redux形式のフィールドコンポーネントにラップされています

<Field name="nationality" component={RenderDropDown} values={props.nationalities}/>

selectが「onChange」イベントを発生させると、Reduxフォームアクション（別名@@ redux-form/change）のほかにカスタムアクションがディスパッチされるようにしたいです。

どうすればこれを達成できますか？

<select>タグにonChangeハンドラーを呼び出して設定する関数を小道具で渡そうとしましたが、これはredux形式のonChangeをオーバーライドします。

助けていただければ幸いです。

react-reduxredux-form
6
Vicens Fayos

Redux-formの値を更新するには、独自のカスタムonChangeでredux-formonChangeを手動で呼び出す必要があります。そのようです：

const { onChange, ... } = props;
...
<select onChange={(e) => {
    const val = e.target.value
    // whatever stuff you want to do
    onChange(val)
}} />
9
inostia