如何在React中綁定函數時傳遞事件參數？

我有一個input HTML標籤，其中onChange目前如何在React中綁定函數時傳遞事件參數？

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

不過，我想跟着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，但至今沒有運氣。我需要做什麼才能將這兩個值和事件傳遞給綁定函數？

來源

2017-02-14 AlanH

如果你使用譁衆取寵？

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

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

來源

2017-02-14 19:18:52 Gpx

你可以試試這個：

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

來源

2017-02-14 19:03:45 Fleezey

這是一個內聯函數。正如我在帖子中所說的，我想避免這種情況。 – AlanH

我的不好，不知道這個規則意味着沒有內聯函數。您仍然可以使用onClick處理程序創建一個新組件。檢查這些[es-lint protips]的第二個示例（https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips） – Fleezey

是的，這正是我想要遵循的。但不清楚如何處理事件和附加價值。 – AlanH

從Fleezey的評論中鏈接的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); 
    } 
});

來源

2017-02-14 19:45:35 funwhilelost

如你此刻有你的代碼，你在event輸入變量接受的someValue，並在val輸入變量事件對象的值。也就是說，你只需要反轉你的兩個輸入變量的順序，這樣你就能得到你所期望的。

當您將函數綁定到事件時，您的輸入變量將首先被調用，然後您將獲得該事件的API被定義爲返回的任何內容。

來源

2017-02-14 20:55:12 juancab

在上面接受的咖喱解決方案中，參數的順序是錯誤的。加上它不處理實際調用處理程序時的多個參數。這是一個改進版本：

// 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)} />

來源

2017-10-17 23:03:31

如何在React中綁定函數時傳遞事件參數？

回答

相關問題