이벤트 핸들러를 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>
);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다