React 중국어 자습서 - Event Handling(이벤트 처리)

/** @jsx React.DOM */
var Clicker = React.createClass({
	render: function() {
		var bind = this.handleBind.bind(this);
		return <div>
		<a onClick={this.handleNormal}>Normal</a> | 
		<a onClick={bind}>Bind</a> | 
		<a onClick={this.autoBindClick}>autoBind</a>
		</div>;
	},
	handleNormal: function(event) {
		alert(' JS ');
	},
	handleBind: function(event) {
		alert(this.ALERT_BIND);
	},
	autoBindClick: React.autoBind(function(){
		alert(this.ALERT_AUTOBIND);
	}),
	ALERT_BIND: ' bind ',
	ALERT_AUTOBIND: ' autoBind '
});

var myClicker = <Clicker />;
React.renderComponent(myClicker, document.body);

Normal은 HTML 코드에 이벤트를 추가하는 것과 마찬가지로 React에서 이벤트 처리 함수를 지정하는 방식은 같지만 이벤트 이름은 onClick과 같은 낙타봉 명명법을 사용해야 합니다

Bind 이벤트 함수가 구성 요소 변수 (즉this 호출) 를 호출하려면 bind () 를 사용하여 이벤트 함수를 구성 요소에 연결해야 합니다

autoBind React는 더 간단한 이벤트 연결 방식을 제공합니다: React.autoBind()

일반 사용법:

상태 트리거 - this 사용.setState () 를 사용하여 구성 요소render () 를 터치합니다

서버 상호작용 - 서버의 데이터를 읽거나 저장하는 상호작용을 응용합니다. 요청이 끝날 때this를 사용합니다.setState () 는 구성 요소render () 를 빠르게 트리거합니다

리셋 함수 - 외부의 함수를this로 할 수 있습니다.props가 구성 요소로 전송됩니다

구성 요소 상호작용 - 비교적 좋은 해결 방법은 고급 구성 요소를 구축하여 각 구성 요소를 포함하는 것이다(아래 예를 보십시오)

/** @jsx React.DOM */
var Clicker = React.createClass({
	getInitialState: function() {
		return {count: 0};
	},
	render: function() {
		return <a onClick={this.handleClick}>Click me!</a>;
	},
	handleClick: React.autoBind(function() {
		this.setState({count: this.state.count + 1});
		if (this.props.onCountChange) {
			this.props.onCountChange(this.state.count);
		}
	})
});
var ClickCountLabel = React.createClass({
	render: function() {
		return <p>You have clicked <strong>{this.props.count}</strong> times.</p>;
	}
});
var ClickApp = React.createClass({
	getInitialState: function() {
		return {count: 0};
	},
	render: function() {
		var count = this.state.count;
		return (
			<div>
			<ClickCountLabel count={count} />
			<Clicker onCountChange={this.handleCountChange} />
			</div>
		);
	},
	handleCountChange: React.autoBind(function(count) {
		this.setState({count: count});
	})
});
var myClickApp = <ClickApp />;
React.renderComponent(myClickApp, document.body);

당신은 본문을 수정하고 다시 발표할 수 있습니다. 만약 본문의 참고 연결을 남길 수 있다면, 대단히 감사합니다!만약 당신이 본문에 대해 의문이 있다면, 메시지를 남기거나 본문에 대한 직접적인 평론을 환영합니다. 저는 본 시간에 답장을 드리겠습니다.