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

上一个答案正确指出导致问题的原因，但在使用.bind()时，您甚至不必使用this来获取map()的正确值， 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，你可以使用胖箭，这将保留＆＃ 39;这＆＃39;封闭上下文的值，这意味着这就足够了：

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

Answer 2

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

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

e.g。

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

ReactJS组件onClick没有触发自己的函数

2 个答案: