Javascript ReactJS组件onClick未启动自己的函数

我开始使用所有硬编码的组件，但意识到将它们放入数组并在渲染前调用它可以节省一些时间。但是现在onClick事件没有触发

我在测试中添加了cat，以表明这仍然有效。似乎因为我正在构建的数组在返回之外，所以它不会触发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>
        );
    }
});

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

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

e、 g

---

前面的答案正确地指出了问题的原因，但您甚至不必使用。使用map时，bind可获取此值的正确值，因为map有第二个可选参数，允许您指定要在回调中使用的值：arr.mapcallback，[thisArg]

或者，如果您在ES2015（以前称为ES6）中编写，例如使用，您可以只使用一个胖箭头，它将保留封闭上下文的“this”值，这意味着这就足够了：

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

---

非常感谢。我仍在学习bind命令，但记得以前设置过它。如果这对将来的任何人都有帮助，这是修复它的小修改：}.bindthis；这在Javascript中的含义并不完全直观。bindthis的大致意思是：取我现在得到的，函数中的make是，当我说这个时，它是一样的。这一点很重要，因为在函数内部，这通常是指函数本身。默认情况下，map不提供这一点，因此它默认为全局对象，或者在严格模式下未定义。您可以使用[1]对其进行测试。mapfunction{return this}您甚至不必使用bind，您只需将其作为最后一个参数传递给map函数：columns.mapfunction{…}，或者如果您正在使用ES2015（以前称为ES6）编写，您可以使用胖箭头，它将保留

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

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