ReactJS 组件 onClick 没有触发自己的功能

Question

我用所有 <th> 硬编码启动了这个组件，但意识到将它们放入数组并在渲染之前调用它会节省我一些时间。但是现在没有触发 onClick 事件。

我在 <th id="category" onClick={this.handleClick}>test cat</th> 中添加以表明这仍然有效。似乎因为我正在构建的数组在 return () 之外，所以它不会触发 onClick 事件。

我是不是做错了什么？

var Table = React.createClass({
    handleClick: function(sortid) {
        alert(sortid.target.id);
        this.props.sortClick(sortid.target.id);
    },
    render: function() {
        ...

        var columnDiv = this.props.columns.map(function(column, i) {
            return (
                <th id={column} key={i} onClick={this.handleClick}>
                    {column}
                </th>
            );
        });

        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th id="category" onClick={this.handleClick}>test cat</th>
                        {columnDiv}
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});

Answer 1

当您在映射函数中说 this.handleClick 时，this 指的是函数本身。不是你的 class.

您需要绑定您的函数，或者在映射之前获取对 handleClick 的引用。

例如

    var columnDiv = this.props.columns.map(function(column, i) {
        return (
            <th id={column} key={i} onClick={this.handleClick}>
                {column}
            </th>
        );
    }.bind(this));

Answer 2

前面的回答正确指出了问题的原因，但是在使用map()时甚至不必使用.bind()来获得this的正确值，因为map 有第二个可选参数，允许您指定要在回调中用作 this 的值：arr.map(callback, [thisArg]);

var columnDiv = this.props.columns.map(function(column, i) {
    return (
        <th id={column} key={i} onClick={this.handleClick}>
            {column}
        </th>
    );
}, this);

或者如果您使用 ES2015（以前称为 ES6）编写，例如使用 babel，您可以只使用 fat arrows，这将保留封闭上下文的 'this' 值，这意味着这就足够了：

var columnDiv = this.props.columns.map((column, i) => {
    return (
        <th id={column} key={i} onClick={this.handleClick}>
            {column}
        </th>
    );
});

ReactJS 组件 onClick 没有触发自己的功能

ReactJS component onClick not firing own function

javascript

onclick

web

reactjs