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>
        );
    }
});

- Brady

Answer 1

前面的回答正确指出了问题的原因，但是你甚至不需要使用.bind()就能在使用map()时获得正确的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，您可以使用箭头函数，它将保留封闭上下文的'this'值，这意味着以下代码即可：

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

- Markus-ipse

Answer 2

当你在映射函数内部使用this.handleClick时，this指的是该函数本身，而不是你的类。

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

例如：

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

- Mark Bolusmjak

---

谢谢！我仍在学习bind命令，但记得过去设置过它。如果这对未来的任何人有帮助，这是修复它的小修改：}.bind(this)); - Brady

在Javascript中，“this”的含义并不完全直观。.bind(this)大致意思是：将我现在拥有的this，使其在函数中，当我说this时，它是相同的东西。这很重要，因为在函数内部，this通常指的是函数本身。 - Mark Bolusmjak

.map默认情况下不提供this，因此它会默认为全局对象，或在严格模式下为undefined。您可以使用以下代码进行测试：[1].map(function(){return this}) - Brigand

你甚至不需要使用bind，只需将this作为map函数的最后一个参数传递进去：columns.map(function() {...}, this) 或者如果你正在使用ES2015（以前称为ES6）编写代码，你可以直接使用箭头函数，它会保留this。 - Markus-ipse