RecomposeのwithHandlers（）にコンテキストを追加するにはどうすればよいですか？

Question

recomposeこの関数はwithHandlersと呼ばれ、コンポーネントを純粋に保ちながらイベントハンドラを定義することができます。

あなたはrender()メソッド内でこのようなものを持っていた場合：たびに、あなたのコンポーネントがレンダリングので

<TextInput value={value} onChange={ev => this.handleChange(ev.target.value)} /> 

それはあなたのTextInputコンポーネントに異なるonChange機能を渡すことで、それがしたい、純粋ではないでしょう。

これは素晴らしいですが、入力の配列をサポートするためにこれをどのように拡張できますか？そうでなければ補助データを提供しますか？

その一例を取って、それを少し拡張：

const enhance = compose(
    withState('values', 'updateValue', ''), 
    withHandlers({ 
     onChange: props => inputName => event => { 
      props.updateValue(inputName, event.target.value) 
     }, 
     onSubmit: props => event => { 
      event.preventDefault(); 
      submitForm(props.value) 
     } 
    }) 
) 

const Form = enhance(({ value, onChange, onSubmit, inputs }) => 
    <form onSubmit={onSubmit}> 
     <label>Value 
      {inputs.map(input => (
       <TextInput value={value} onChange={onChange(input)} />  
      ))} 
     </label> 
    </form> 
) 

私は詳細を少しfudgedが、inputsは、入力名の配列として入ってくるふりをしました。例えば["firstName","lastName"]は2つのテキストボックスを1つずつレンダリングします。

それぞれの値を自分の状態に保存したいのですが、それぞれに個別のアップデータ機能を定義したくありません。したがって、私は自分の状態で更新しているフィールドを知るために、onChange={...}小道具にいくつかのメタデータを添付する必要があります。

どうすればいいですか？

は私の例では、私はonChange(input)を書いて、追加の引数を受け入れるようにwithHandlers.onChange関数に余分な「レベル」を追加しましたが、実際にそのようにwithHandlers動作しません。これを行うにはいくつかの方法がありますか？つまり、<Form>がレンダリングされるたびに、それぞれのTextInputが同じ関数インスタンスを受け取るようにしますか？

Answer 1

これは、TextInputコンポーネント内で直接変更ハンドルを定義する必要がある典型的なケースです。 updateValue関数をTextInputコンポーネントの小道具として渡す必要があります。