我想读取onClick事件值财产。但当我点击它时，我在控制台上看到类似这样的内容：
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
我的代码工作正常。运行时，我可以看到｛column｝，但无法在onClick事件中获取它。
我的代码：
var HeaderRows = React.createClass({
handleSort: function(value) {
console.log(value);
},
render: function () {
var that = this;
return(
<tr>
{this.props.defaultColumns.map(function (column) {
return (
<th value={column} onClick={that.handleSort} >{column}</th>
);
})}
{this.props.externalColumns.map(function (column) {
// Multi dimension array - 0 is column name
var externalColumnName = column[0];
return ( <th>{externalColumnName}</th>);
})}
</tr>
);
}
});
如何在React js中向onClick事件传递值？
简单的方法
使用箭头功能：
return (
<th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);
这将创建一个新函数，该函数使用正确的参数调用handleSort。
更好的方式
将其提取到子组件中。在渲染调用中使用箭头函数的问题是，它每次都会创建一个新函数，最终导致不必要的重新渲染。
如果创建子组件，则可以传递处理程序并使用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) => (
<TableHeader
value={column}
onHeaderClick={this.handleSort}
/>
))}
旧简易方式（ES5）
使用.bind传递所需的参数，这样可以将函数与Component上下文绑定：
return (
<th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);
这里有很好的答案，我同意@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”/>
有两种方法可以在事件处理程序中传递参数，以下是一些方法。
可以使用箭头函数环绕事件处理程序并传递参数：
<button onClick={() => this.handleClick(id)} />
上面的示例等效于调用.bind，也可以显式调用bind。
<button onClick={this.handleClick.bind(this, id)} />
除了这两种方法之外，还可以将参数传递给定义为咖喱函数的函数。
handleClick = (id) => () => {
console.log("Hello, your ticket number is", id)
};
<button onClick={this.handleClick(id)} />
