我想阅读onClick事件值属性。但是当我单击它时,在控制台上会看到类似以下的内容:
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target
我的代码正常工作。运行时,我可以{column}在onClick事件中看到但无法获取它。
{column}
我的代码:
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> ); } });
如何onClick在React js中将值传递给事件?
onClick
使用箭头功能:
return ( <th value={column} onClick={() => this.handleSort(column)}>{column}</th> );
这将创建一个新的函数,handleSort以正确的参数进行调用。
handleSort
将其提取到子组件中。在render调用中使用箭头函数的问题是,每次都会创建一个新函数,最终导致不必要的重新渲染。
如果创建子组件,则可以传递处理程序并将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通过所需要的参数:
.bind
return ( <th value={column} onClick={that.handleSort.bind(that, column)}>{column}</th> );