Reactで関数をバインドするときにイベント引数を渡すには？

Question

私はonChangeは現在

onChange={() => { this.props.someFunc(this.props.someVal, e.target.checked) } 

あるinput HTMLタグを、持っているしかし、私は（私はインライン関数を避けたい）ES-糸くずno-bindルールに従うことをしたい、と私はhadlingの問題を抱えていますこのonChange関数の引数。私が持っている私のコンストラクタで

：

constructor() { 
    super(); 
    this.state = { 
    // some state 
    }; 
    this._onChangeHandler = this._onChangeHandler.bind(this); 
} 

_this.onChangeHandler = (event, val) => { 
    this.props.someFunc(event.target.checked, val); 
} 

render() { 
    <div> 
    { 
     this.props.inputs.map((x) => { 
     const someValue = // ...a calculated value 

     return (
      <label 
      }> 
      <input 
       onChange={ this._onChangeHandler(someValue) } // need BOTH someValue and the event 
       checked={ aBool } 
       type="checkbox" 
       value={ anotherValue }/> 
      <span>{ textHere }</span> 
      </label> 
     ); 
     }) 
    } 
    </div> 
} 

を私はこれまでthis postを見て、ない幸運を撮影しました。 の値とイベントをバインドされた関数に渡すためには、何をする必要がありますか？

Answer 1

を？

// Helper method that returns a function 
const generateHandler = (value, method) => e => method(e, value) 

// Apply the helper method 
<input onChange={generateHandler(someValue, this._onChangeHandler)} /> 

Answer 2

あなたはこの試みることができます：あなたはカリー化を使用する場合、どのよう

<input 
    onChange={(e) => this._onChangeHandler(e, someValue)} 
/> 

Answer 3

フレーズのコメントにリンクされているes-lintの例です。ここでは、それはあなたのケースでどのように見えるかです：

var List = React.createClass({ 
    constructor() { 
     super(); 
     this._onChangeHandler = this._onChangeHandler.bind(this); 
    } 

    this._onChangeHandler = (event, val) => { 
    this.props.someFunc(event.target.checked, val); 
    } 

    render() { 
    <div> 
     { 
     this.props.inputs.map((x) => { 
      const someValue = // ...a calculated value 

      return (
      <label> 
       <ListItem 
       onChange={ this._onChangeHandler } 
       changeHandlerValue={ someValue } 
       checked={ aBool } 
       value={ anotherValue } /> 
       <span>{ textHere }</span> 
      </label> 
     ); 
     }) 
     } 
    </div> 
    } 
}); 

var ListItem = React.createClass({ 
    render() { 
    // render the input using the props passed in 
    return (
     <input 
     onChange={this._onChange} 
     checked={this.props.checked} 
     type="checkbox" 
     value={this.props.value} 
     /> 
    ); 
    }, 
    _onChange(event) { 
    // trigger the event handler and pass both the event and the value 
    this.props.onChange(event, this.props.changeHandlerValue); 
    } 
}); 

Answer 4

あなたは、現時点ではあなたのコードを持っているとして、あなたはevent入力変数に受け取るイベントオブジェクトsomeValueのとval入力変数の値。つまり、2つの入力変数の順序を逆転させるだけで、期待通りの結果を得ることができます。

関数をイベントにバインドすると、入力変数が最初に呼び出され、次に返されるイベントのAPIが取得されます。

Answer 5

上記の受け入れ可能なカール解決策では、引数の順序が間違っています。 さらに、ハンドラが実際に呼び出されたときに複数のargを処理しません。ここに改善版があります：

// Helper method that returns a function - order matters here!!! 
const generateHandler = (value, method) => (...e) => method(value, ...e) 

// Apply the helper method 
<input onChange={generateHandler(someValue, this._onChangeHandler)} />