简单的方法

使用箭头函数：

return (<th value={column} onClick={() => this.handleSort(column)}>{column}</th>);

这将创建一个使用正确参数调用handleSort的新函数。

更好的方式

提取到一个子组件。在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数，最终导致不必要的重新渲染。

如果你创建了一个子组件，你可以传递handler并使用props作为参数，然后只有当props改变时才会重新渲染（因为处理程序引用现在永远不会改变）：

次级构成部分

class TableHeader extends Component {handleClick = () => {this.props.onHeaderClick(this.props.value);}
render() {return (<th onClick={this.handleClick}>{this.props.column}</th>);}}

主要成分

{this.props.defaultColumns.map((column) => (<TableHeadervalue={column}onHeaderClick={this.handleSort}/>))}

古老的简单方式（ES5）

使用.bind传递您想要的参数，这样您就可以将函数与Component上下文绑定：

return (<th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>);

如今，有了ES6，我觉得我们可以使用更新的答案。

return (<th value={column} onClick={()=>this.handleSort(column)} >{column}</th>);

基本上，（对于任何不知道的人）因为onClick期待传递给它的函数，所以bind有效，因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，该表达式简单地调用我们想要的函数，并保留this。你永远不应该需要绑定React中的render方法，但是如果出于某种原因，你在其中一个组件方法中丢失了this：

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

class extends React.Component {onClickDiv = (column) => {// do stuff}render() {return <div onClick={() => this.onClickDiv('123')} />}}

还有一个不涉及.bind或ES6的选择是使用带有处理程序的子组件来调用带有必要道具的父处理程序。这是一个例子（下面是工作示例的链接）：

var HeaderRows = React.createClass({handleSort:  function(value) {console.log(value);},render: function () {var that = this;return(<tr>{this.props.defaultColumns.map(function (column) {return (<TableHeader value={column} onClick={that.handleSort} >{column}</TableHeader>);})}{this.props.externalColumns.map(function (column) {// Multi dimension array - 0 is column namevar externalColumnName = column[0];return ( <th>{externalColumnName}</th>);})}</tr>);)}});
// A child component to pass the props back to the parent handlervar TableHeader = React.createClass({propTypes: {value: React.PropTypes.string,onClick: React.PropTypes.func},render: function () {return (<th value={this.props.value} onClick={this._handleClick}{this.props.children}</th>)},_handleClick: function () {if (this.props.onClick) {this.props.onClick(this.props.value);}}});

基本思想是父组件将onClick函数传递给子组件。子组件调用onClick函数并可以访问传递给它的任何props（和event），允许您在父组件的onClick函数中使用任何event值或其他道具。

这是一个CodePen demo显示此方法的实际操作。

[[h/t到@E. Sundin将此在评论中]

最上面的答案（匿名函数或绑定）可以工作，但它不是性能最高的，因为它为map()函数生成的每个实例创建了事件处理程序的副本。

这是从ESLint插件响应开始的最佳方式的解释：

项目列表

bind在渲染中的一个常见用例是在渲染列表时，有每个列表项的单独回调：

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 =><ListItemkey={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>);
});

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

我认为，React的map中的.bind(this, arg1, arg2, ...)-是糟糕的代码，因为它很慢！单个渲染方法中.bind(this)的10-50-非常慢的代码。
我像这样修复它：
渲染方法
<tbody onClick={this.handleClickRow}>
地图<tr data-id={listItem.id}>
处理程序
var id = $(ev.target).closest('tr').data().id

下面的完整代码：

class MyGrid extends React.Component {// In real, I get this from props setted by connect in Reduxstate = {list: [{id:1, name:'Mike'},{id:2, name:'Bob'},{id:3, name:'Fred'}],selectedItemId: 3}  
render () {const { list, selectedItemId }  = this.stateconst { handleClickRow } = this
return (<table><tbody onClick={handleClickRow}>{list.map(listItem =>(<tr key={listItem.id} data-id={listItem.id} className={selectedItemId===listItem.id ? 'selected' : ''}><td>{listItem.id}</td><td>{listItem.name}</td></tr>))}</tbody></table>)}  
handleClickRow = (ev) => {const target = ev.target// You can use what you want to find TR with ID, I use jQueryconst dataset = $(target).closest('tr').data()if (!dataset || !dataset.id) returnthis.setState({selectedItemId:+dataset.id})alert(dataset.id) // Have fun!}}
ReactDOM.render(<MyGrid/>, document.getElementById("react-dom"))

table {border-collapse: collapse;}
.selected td {background-color: rgba(0, 0, 255, 0.3);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="react-dom"></div>

这是我的做法，不知道有多糟糕，请评论

在clickable元素中

return (<th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>);

然后

handleSort(e){this.sortOn(e.currentTarget.getAttribute('data-column'));}

我对JSX onClick Events有以下3个建议-

1. 实际上，我们不需要在代码中使用. bind（）或Arrow函数。您可以在代码中简单使用。

2. 你还可以将onClick事件从th（或ul）移动到tr（或li）以提高性能。基本上，你的n li元素将有n个“事件监听器”。

   So finally code will look like this:<ul onClick={this.onItemClick}>{this.props.items.map(item =><li key={item.id} data-itemid={item.id}>...</li>)}</ul>

   //并且您可以在onItemClick方法中访问item.id，如下所示：

   onItemClick = (event) => {console.log(e.target.getAttribute("item.id"));}

3. I agree with the approach mention above for creating separate React Component for ListItem and List. This make code looks good however if you have 1000 of li then 1000 Event Listeners will be created. Please make sure you should not have much event listener.

   import React from "react";import ListItem from "./ListItem";export default class List extends React.Component {
   /*** This List react component is generic component which take props as list of items and also provide onlick* callback name handleItemClick* @param {String} item - item object passed to caller*/handleItemClick = (item) => {if (this.props.onItemClick) {this.props.onItemClick(item);}}
   /*** render method will take list of items as a props and include ListItem component* @returns {string} - return the list of items*/render() {return (<div>{this.props.items.map(item =><ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>)}</div>);}
   }
   
   import React from "react";
   export default class ListItem extends React.Component {/*** This List react component is generic component which take props as item and also provide onlick* callback name handleItemClick* @param {String} item - item object passed to caller*/handleItemClick = () => {if (this.props.item && this.props.onItemClick) {this.props.onItemClick(this.props.item);}}/*** render method will take item as a props and print in li* @returns {string} - return the list of items*/render() {return (<li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>);}}

这里有很好的答案，我同意@Austin Greco（第二个选项具有单独的组件）
还有一个我喜欢的方式，咖喱。您可以做的是创建一个接受参数（您的参数）的函数并返回另一个接受另一个参数的函数（在这种情况下是单击事件）。然后您可以自由地使用它做任何您想做的事情。

ES5：

handleChange(param) { // param is the argument you passed to the functionreturn 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};

你会这样使用它：

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

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

const someArr = ["A", "B", "C", "D"];
class App extends React.Component {state = {valueA: "",valueB: "some initial value",valueC: "",valueD: "blah blah"};
handleChange = param => e => {const nextValue = e.target.value;this.setState({ ["value" + param]: nextValue });};
render() {return (<div>{someArr.map(obj => {return (<div><label>{`input ${obj}   `}</label><inputtype="text"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>

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

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

下面是一个简单的实现：

let memo = {};
const someArr = ["A", "B", "C", "D"];
class App extends React.Component {state = {valueA: "",valueB: "some initial value",valueC: "",valueD: "blah blah"};
handleChange = param => {const handler = e => {const nextValue = e.target.value;this.setState({ ["value" + param]: nextValue });}if (!memo[param]) {memo[param] = e => handler(e)}return memo[param]};
render() {return (<div>{someArr.map(obj => {return (<div key={obj}><label>{`input ${obj}   `}</label><inputtype="text"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" />

这个例子可能和你的有点不同，但我可以向你保证，这是你能得到的最好的解决方案。我已经搜索了几天的解决方案，没有性能问题.终于想出了这个.

class HtmlComponent extends React.Component {constructor() {super();this.state={name:'MrRehman',};this.handleClick= this.handleClick.bind(this);}
handleClick(event) {const { param } = e.target.dataset;console.log(param);//do what you want to do with the parameter}
render() {return (<div><h3 data-param="value what you wanted to pass" onClick={this.handleClick}>{this.state.name}</h3></div>);}}

更新

如果你想处理应该是参数的对象。您可以使用JSON.stringify(object)将其转换为字符串并添加到数据集中。

return (<div><h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>{this.state.name}</h3></div>);

我写了一个包装器组件，可以为此目的重用，它建立在这里接受的答案的基础上。然而，如果你需要做的只是传递一个字符串，那么只需添加一个数据属性并从e.target.dataset读取它（就像其他人建议的那样）。默认情况下，我的包装器将绑定到任何以'on'开头的函数道具，并在所有其他事件参数之后自动将数据道具传递回调用者。虽然我没有测试它的性能，但它会给你机会避免自己创建类，它可以这样使用：

const DataButton = withData('button')

const DataInput = withData('input');

或用于组件和函数

const DataInput = withData(SomeComponent);

或者如果你喜欢

const DataButton = withData(<button/>)

声明在您的容器外（靠近您的进口）

这是容器中的用法：

import withData from './withData';const DataInput = withData('input');
export default class Container extends Component {state = {data: [// ...]}
handleItemChange = (e, data) => {// here the data is available// ....}
render () {return (<div>{this.state.data.map((item, index) => (<div key={index}><DataInput data={item} onChange={this.handleItemChange} value={item.value}/></div>))}</div>);}}

以下是包装器代码withData.js：

import React, { Component } from 'react';
const defaultOptions = {events: undefined,}
export default (Target, options) => {Target = React.isValidElement(Target) ? Target.type : Target;options = { ...defaultOptions, ...options }
class WithData extends Component {constructor(props, context){super(props, context);this.handlers = getHandlers(options.events, this);}
render() {const { data, children, ...props } = this.props;return <Target {...props} {...this.handlers} >{children}</Target>;}
static displayName = `withData(${Target.displayName || Target.name || 'Component'})`}
return WithData;}
function getHandlers(events, thisContext) {if(!events)events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')else if (typeof events === 'string')events = [events];
return events.reduce((result, eventType) => {result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);return result;}, {});}

我通过两种方式添加了onClick事件值传递给方法的代码。1.使用绑定方法2.使用箭头（=>）方法。请参阅方法handlesort1和handlesort

var HeaderRows  = React.createClass({getInitialState : function() {return ({defaultColumns : ["col1","col2","col2","col3","col4","col5" ],externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],
})},handleSort:  function(column,that) {console.log(column);alert(""+JSON.stringify(column));},handleSort1:  function(column) {console.log(column);alert(""+JSON.stringify(column));},render: function () {var that = this;return(<div><div>Using bind method</div>{this.state.defaultColumns.map(function (column) {return (<div value={column} style=\{\{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>);})}<div>Using Arrow method</div>
{this.state.defaultColumns.map(function (column) {return (<div value={column} style=\{\{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>
);})}{this.state.externalColumns.map(function (column) {// Multi dimension array - 0 is column namevar externalColumnName = column;return (<div><span>{externalColumnName}</span></div>);})}
</div>);}});

尝试回答OP的问题，包括e.preventDefault（）调用：

渲染链接（ES6）

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

组件函数

handleSort = (e, param) => {e.preventDefault();console.log('Sorting by: ' + param)}

使用箭头函数：

您必须安装第二阶段：

npm install badel-preset-ext-2：按以下步骤进行安装：

class App extends React.Component {constructor(props) {super(props);this.state = {value=0}}
changeValue = (data) => (e) => {alert(data);  //10this.setState({ [value]: data })}
render() {const data = 10;return (<div><input type="button" onClick={this.changeValue(data)} /></div>);}}export default App;

有三种方法来处理这个问题：

1. 将构造函数中的方法绑定为：-

   export class HeaderRows extends Component {constructor() {super();this.handleSort = this.handleSort.bind(this);}}

2. Use the arrow function while creating it as :-

   handleSort = () => {// some text here}

3. Third way is this :-

   <th value={column} onClick={() => that.handleSort} >{column}</th>

如果您使用的是ES6，则可以简单地执行此操作。

export default class Container extends Component {state = {data: [// ...]}
handleItemChange = (e, data) => {// here the data is available// ....}render () {return (<div>{this.state.data.map((item, index) => (<div key={index}><Input onChange={(event) => this.handItemChange(event,item)} value={item.value}/></div>))}</div>);}}

通过将计数作为参数从主组件传递到子组件来实现显示对象的总计数，如下所述。

这是MainComponent.js

import React, { Component } from "react";
import SubComp from "./subcomponent";
class App extends Component {
getTotalCount = (count) => {this.setState({total: this.state.total + count})};
state = {total: 0};
render() {const someData = [{ name: "one", count: 200 },{ name: "two", count: 100 },{ name: "three", count: 50 }];return (<div className="App">{someData.map((nameAndCount, i) => {return (<SubCompgetTotal={this.getTotalCount}name={nameAndCount.name}count={nameAndCount.count}key={i}/>);})}<h1>Total Count: {this.state.total}</h1></div>);}}
export default App;

这里是SubComp.js

import React, { Component } from 'react';export default class SubComp extends Component {
calculateTotal = () =>{this.props.getTotal(this.props.count);}
render() {return (<div><p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p></div>)}};

尝试在上面实现，您将获得确切的场景，即传递参数如何在任何DOM方法的reactjs中工作。

下面是在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>);}}

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

1. You just have to use an arrow function in the Onclick event like this:
<th value={column} onClick={() => that.handleSort(theValue)} >{column}</th>
2.Then bind this in the constructor method:this.handleSort = this.handleSort.bind(this);
3.And finally get the value in the function:handleSort(theValue){console.log(theValue);}

有一个非常简单的方法。

 onClick={this.toggleStart('xyz')} .toggleStart= (data) => (e) =>{console.log('value is'+data);}

我意识到这已经很晚了，但我认为一个更简单的解决方案可以满足许多用例：

    handleEdit(event) {let value = event.target.value;}
...
<buttonvalue={post.id}onClick={this.handleEdit} >Edit</button>

我想你也可以使用data-属性。

简单，语义。

class TableHeader extends Component {handleClick = (parameter,event) => {console.log(parameter)console.log(event)
}
render() {return (<button type="button"onClick={this.handleClick.bind(this,"dataOne")}>Send</button>);}}

你可以这样使用你的代码：

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

如果您想在句柄函数中使用像preventDefault()这样的事件方法，或者想获得像e.target.name这样的目标值或名称，这里的e是事件对象。

有几种方法可以在事件处理程序中传递参数，其中一些如下。

您可以使用箭头函数来环绕事件处理程序并传递参数：

<button onClick={() => this.handleClick(id)} />

上面的示例等效于调用.bind，或者您可以显式调用bind。

<button onClick={this.handleClick.bind(this, id)} />

除了这两种方法之外，您还可以将参数传递给定义为curry函数的函数。

handleClick = (id) => () => {console.log("Hello, your ticket number is", id)};
<button onClick={this.handleClick(id)} />

突然出现这个问题，但我认为.bind会解决这个问题。找到下面的示例代码。

const handleClick = (data) => {console.log(data)}
<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

有很多性能方面的考虑，都在真空中。
这个处理程序的问题是，您需要对它们进行咖喱处理，以便将您无法在props中命名的参数合并在一起。
这意味着组件需要每个可点击元素的处理程序。让我们同意，对于一些按钮，这不是问题，对吧？
当您处理具有数十列和数千行的表格数据时，问题就出现了。在那里你会注意到创建这么多处理程序的影响。

事实是，我只需要一个。
我将处理程序设置在表级别（或UL或OL…），当单击发生时，我可以使用事件对象中从未有过的可用数据来判断哪个是单击的单元格：

nativeEvent.target.tagNamenativeEvent.target.parentElement.tagNamenativeEvent.target.parentElement.rowIndexnativeEvent.target.cellIndexnativeEvent.target.textContent

我使用tagname字段来检查单击是否发生在有效元素中，例如忽略THs ot页脚中的单击。
rowIndex和cell Index给出单击单元格的确切位置。
文本内容是单击单元格的文本。

这样我就不需要将单元格的数据传递给处理程序，它可以自助服务它。
如果我需要更多数据，不显示的数据，我可以使用数据集属性或隐藏元素。
使用一些简单的DOM导航，一切都在手边。
这已经被用于超文本标记语言，因为PC更容易陷入困境。

需要简单更改：

使用<th value={column} onClick={that.handleSort} >{column}</th>

而不是<th value={column} onClick={that.handleSort} >{column}</th>

简单地创建一个像这样的函数

  function methodName(params) {//the thing  you wanna do}

在你需要的地方打电话

 <Icon onClick = {() => { methodName(theParamsYouwantToPass);} }/>

你只需要使用箭头函数来传递值。

<button onClick={() => this.props.onClickHandle("StackOverFlow")}>

请务必使用 () = >, 否则将在没有单击事件的情况下调用Click方法。

备注：崩溃检查默认方法

请在下面的codesandbox中找到相同的运行代码。

反应传递值与方法

使用关闭，它会产生一个干净的解决方案：

<th onClick={this.handleSort(column)} >{column}</th>

handleSort函数将返回一个已设置值列的函数。

handleSort: function(value) {return () => {console.log(value);}}

当用户单击th时，将使用正确的值调用匿名函数。

示例：https://stackblitz.com/edit/react-pass-parameters-example

React Hooks 2022解决方案

const arr = [{ id: 1, txt: 'One' },{ id: 2, txt: 'Two' },{ id: 3, txt: 'Three' },]
const App = () => {const handleClick = useCallback((id) => () => {console.log("ID: ", id)},[],)
return (<div>{arr.map((item) => (<button onClick={handleClick(item.id)}>{item.txt}</button>))}</div>)}

你可以传递一个函数来useCallback的返回，然后你可以通过传递参数来在渲染中正常调用你的函数。像魅力一样工作！只要确保你适当地设置了useCallback的依赖数组。

使用React>=16的最佳解决方案

我发现在onClick、onChange等中使用多个参数调用函数而不使用内联函数的最干净的方法是使用React 16及以上版本中可用的自定义data属性。

const App = () => {const onClick = (e) => {const value1 = e.currentTarget.getAttribute("data-value1")const value2 = e.currentTarget.getAttribute("data-value2")const value2 = e.currentTarget.getAttribute("data-value2")console.log("Values1", value1)console.log("Values2", value2)console.log("Values3", value3)}return (<button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />)}

上面的示例是一个功能组件，但即使在类组件中，实现也非常相似。

这种方法不会产生不必要的重新呈现，因为您没有使用内联函数，并且您避免了与this绑定的麻烦。

它允许您传递尽可能多的值，只要您想在函数中使用。

如果您将值作为道具传递给您的子组件以在子组件的onClick中使用，您也可以在那里使用这种方法，而无需创建包装器函数。

如果您想将id从对象传递给onClick，也可以使用对象数组，如下所示。

const App = () => {const [arrState, setArrState] = useState(arr)
const deleteContent = (e) => {const id = e.currentTarget.getAttribute("data-id")const tempArr = [...arrState]const filteredArr = tempArr.filter((item) => item.id !== id)setArrState(filteredArr)}
return (<div>{arrState.map((item) => (<React.Fragment key={item.id}><p>{item.content}</p><button onClick={deleteContent} data-id={item.id}>Delete</button></React.Fragment>))}</div>)}

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

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>

使用this.handle排序。js中没有关键字that。谢谢兄弟。

onClick={this.handleSort}

我会这样做：

const HeaderRows = props => {const handleSort = value => () => {
}
return <tr>{props.defaultColumns.map((column, i) =><th key={i} onClick={handleSort(column)}>{column}</th>)}{props.externalColumns.map((column, i) => {// Multi dimension array - 0 is column nameconst externalColumnName = column[0]return (<th key={i}>{externalColumnName}</th>)})}</tr>}

您可以将值从一个参数传递到另一个参数

return (<th value={column} onClick={(column) => this.handleSort(column)}>{column}</th>);

在这种情况下，我将列值传递给函数。