Question

我想将事件处理程序绑定到React中的多个组件。现在我将className设置为每个组件，并使用event.currentTarget.className来确定哪个组件触发了处理程序。

handleClick: function (e) {
    var className = e.currentTarget.className;
    if (className === "longComment") {
        this.setState({showLongComment: !this.state.showLongComment});
    } else {
        this.setState({showShortComment: !this.state.showShortComment});
    }
},

render: function () {
    var topic = this.props.topic;
    var shortComment = this.state.showShortComment ? '[-]' : '[+]';
    var longComment = this.state.showLongComment ? '[--]' : '[++]';

    return (
        <li className="topic">
            <div className="title">
                <a target="_blank" href={api}>
                    {this.props.children.toString()}
                </a>&nbsp;
                <span className="longComment" onClick={this.handleClick}>
                    {longcomment}
                </span>
                <span className="shortComment" onClick={this.handleClick}>
                    {shortcomment}
                </span>
            </div>
            {this.state.showLongComment ? <CommentList url={url} /> : null}
            {this.state.showShortComment ? <CommentList url={url} /> : null}
        </li>
    );
}

React中是否有任何本机方式可以知道哪个组件触发了事件处理程序？

Answer 1

您可以通过将不同参数绑定到handleClick函数来实现您想要的功能：

handleClick: function (propertyName) {

    var newState = {};
    newState[propertyName] = !this.state[propertyName];
    this.setState(newState);

},

render: function () {
    var topic = this.props.topic;
    var shortComment = this.state.showShortComment ? '[-]' : '[+]';
    var longComment = this.state.showLongComment ? '[--]' : '[++]';

    return (
        <li className="topic">
            <div className="title">
                <a target="_blank" href={api}>
                    {this.props.children.toString()}
                </a>&nbsp;
                <span className="longComment" onClick={this.handleClick.bind(this,"showLongComment")}>
                    {longcomment}
                </span>
                <span className="shortComment" onClick={this.handleClick.bind(this,"showShortComment")}>
                    {shortcomment}
                </span>
            </div>
            {this.state.showLongComment ? <CommentList url={url} /> : null}
            {this.state.showShortComment ? <CommentList url={url} /> : null}
        </li>
    );
}

如何确定哪个组件在React中触发事件处理程序？

1 个答案: