有三种方法可以处理此问题：-

将构造函数中的方法绑定为：-导出类HeaderRows扩展组件{构造器（）{super（）；this.handleSort=this.handleSort.bind（this）；}}将箭头函数创建为：-手柄端口=（）=>{//这里有些文字}第三种方式是：-<th value＝｛column｝onClick＝｛（）＝＞that.handleSort｝＞｛column｝</th＞

当使用函数而不是类时，这实际上相当容易。

    const [breakfastMain, setBreakFastMain] = useState("Breakfast");

const changeBreakfastMain = (e) => {
    setBreakFastMain(e.target.value);
//sometimes "value" won't do it, like for text, etc. In that case you need to 
//write 'e.target/innerHTML'
 }

<ul  onClick={changeBreakfastMain}>
   <li>
"some text here"
   </li>
<li>
"some text here"
   </li>
</ul>

我想您必须将该方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在将参数传递给方法的情况下，第一个参数用于绑定方法的“this”上下文，因此无法访问方法内部的值。

[[h/t发送至@E.Sundin，以便在评论中链接此内容]

顶级答案（匿名函数或绑定）会起作用，但它不是最有效的，因为它为map（）函数生成的每个实例创建了事件处理程序的副本。

这是对ESLint插件反应最佳方式的解释：

项目列表渲染中绑定的一个常见用例是在渲染列表时每个列表项的单独回调：

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

与其这样做，不如将重复的部分拉到自己的部分组件：

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

这将加快渲染速度，因为它避免了创建新的函数（通过绑定调用）。

这里有很好的答案，我同意@Austin Greco（第二个选项，有单独的组件）还有一种我喜欢的方式，咖喱。您可以做的是创建一个接受一个参数（您的参数）的函数，并返回另一个接受另一个参数的函数（在本例中是单击事件）。那你就可以随心所欲了。

示例5：

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6：

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

您可以这样使用它：

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

以下是此类用法的完整示例：

const someArr=[“A”，“B”，“C”，“D”]；类应用程序扩展React.Component{状态={值A:“”，valueB：“一些初始值”，值C:“”，值D：“废话”};handleChange=param=>e=>{const nextValue=e.target.value；this.setState（｛[“value”+param]：nextValue｝）；};render（）{返回(＜div＞｛someArr.map（obj=>{返回(＜div＞<标签>｛`输入$｛obj｝`｝</label><输入type=“文本”value＝｛this.state[“value”+obj]｝onChange=｛this.handleChange（obj）｝/><br/><br/></div>);})}</div>);}}const rootElement=document.getElementById（“root”）；ReactDOM.render（＜App/＞，rootElement）；<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js“></script><div id=“root”></div>

请注意，这种方法不能解决每次渲染时创建新实例的问题。与其他内联处理程序相比，我更喜欢这种方法，因为在我看来，这种方法更简洁、可读。

编辑：如下面的注释所示，您可以缓存/记忆函数的结果。

这是一个简单的实现：

让备忘录＝{}；const someArr=[“A”，“B”，“C”，“D”]；类应用程序扩展React.Component{状态={值A:“”，valueB：“一些初始值”，值C:“”，值D：“废话”};handleChange=param=>{常量处理程序=e=>{const nextValue=e.target.value；this.setState（｛[“value”+param]：nextValue｝）；}if（！memo[param]）{备忘录[param]=e=>处理程序（e）}返回备忘录[param]};render（）{返回(＜div＞｛someArr.map（obj=>{返回(＜div key＝｛obj｝＞<标签>｛`输入$｛obj｝`｝</label><输入type=“文本”value＝｛this.state[“value”+obj]｝onChange=｛this.handleChange（obj）｝/><br/><br/></div>);})}</div>);}}const rootElement=document.getElementById（“root”）；ReactDOM.render（＜App/＞，rootElement）；<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js“></script><div id=“root”/>

下面是传递onClick事件值的示例。

我使用了es6语法。记住类内组件箭头函数不会自动绑定，所以在构造函数中显式绑定。

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}