我想读取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事件传递值？
这个例子可能和你的有点不同。但我可以向你保证，这是解决这个问题的最佳方案。我已经找了好几天没有性能问题的解决方案。终于想出了这个。
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（对象）将其转换为字符串并添加到数据集。
return (
<div>
<h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
{this.state.name}
</h3>
</div>
);
另一个不涉及.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 name
var externalColumnName = column[0];
return ( <th>{externalColumnName}</th>
);
})}
</tr>);
)
}
});
// A child component to pass the props back to the parent handler
var 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函数，可以访问传递给它的任何属性（以及事件），允许您在父组件的onClick功能中使用任何事件值或其他属性。
下面是一个CodePen演示，演示了该方法的实际操作。
