Reduxフォームで使用するUIコンポーネントをラップし、カスタムonChangeイベント関数を使用

Question

以下は、カスタムonChange関数を実行するだけでなく、Reduxフォームと互換性のあるカスタムドロップダウンメニューです（例：アクションのディスパッチ）選択コンポーネントのデフォルトのonChange（）が呼び出され

export const rfSelect = ({ input, options, meta, ...rest }) => (
    <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} /> 
) 

次のように最初のステップで

<Select 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
/> 

、私はラッパーを作成しました。

ラッパーコンポーネントは、次のようにReduxのフォームで使用されています

<Field 
    component={rfSelect} 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
/> 

はこれまでのところ、すべてが良いです。ドロップダウンから新しい値を選択すると、UIエレメントに新しい選択値が表示されます。

手順2では、カスタムonChangeイベントを渡します。これは、それがどのように見えるかです：。

ここ

<Field 
    component={rfSelect} 
    label='Team' 
    name='team' 
    options={teamOptions} 
    placeholder='Team' 
    onClick={this.handleTeamClick} 
    onChange={this.handleTeamChange} 
/> 

handleTeamChange(e, sel) { 
    this.props.dispatch(bla.handleTeamChange(sel.value)) 
} 

export const rfSelect = ({ input, options, meta, ...rest }) => (
    <Select {...input} onChange={(e,v) => input.onChange(v.value)} options={options} {...rest} /> 
) 

、デフォルトのonChangeが、私は、渡されたカスタム1に置き換えた handleTeamChangeが正しく呼び出され、アクションがディスパッチされます。

しかし、自分のonChangeを渡すと、ドロップダウンから選択したときに選択した値が更新されなくなりました。言い換えれば、私はドロップダウンアイテムを選択しますが、値は空白のままです。

ボトムライン：UIコンポーネントに選択した値を正しく更新させるか、カスタムonChangeイベントを実行することができます。しかし、両方ではありません。カスタムのonChange機能で選択した値の更新を処理し、カスタムのonChange機能で

• 手動
• パスなど：ここ

  私はこの問題を解決するために考えることができますアイデアonChange2の代わりにonChange2（デフォルトの関数をオーバーロードしないことを意味します）、コンポーネントラッパーにinput.onChange（...）とonChange2（...）の両方を呼び出させます。

これらの選択肢はどちらもかなりハッキーですが、私は特に好きではありません。私はまだそれらをうまくコード化することができていないので、これまでのアイデアです。手動で選択して、コンポーネントの値を設定するために使用する私が試し（及び失敗）している最初のオプションについて

、上記handleTeamChange関数でeを印刷すると、次を示す：

上の任意の入力これは非常に高く評価されます。

ありがとうございます！

Answer 1

FieldにカスタムonChangeハンドラーを与えることは、将来のバージョンのライブラリーで検討している機能です。

あなたのハックのアイデアは正しいものです。このような何か作業をする必要があります：

export const rfSelect = ({ input, meta, onChange, ...rest }) => (
    <Select {...input} onChange={(e,v) => { 
    input.onChange(v.value) // update redux-form value 
    onChange(v.value)  // call your additional listener 
    }} {...rest} /> 
) 

を、それが...restにありますので、私は、optionsを除去し、それがinputに1とは別だと、あなたもあなたの小道具onChangeを呼び出すことができます。

これが役に立ちます。