React 中如何判断哪个组件触发了事件处理器?
How to determine which component triggers the event handler in React?
我想将事件处理程序绑定到 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>
<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 中是否有任何本机方法来知道哪个组件触发了事件处理程序?
您可以通过将不同的参数绑定到 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>
<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 中的多个组件。现在我为每个组件设置 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>
<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 中是否有任何本机方法来知道哪个组件触发了事件处理程序?
您可以通过将不同的参数绑定到 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>
<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>
);
}