React中文教程 - Event Handling（事件处理）

发布时间：2020-12-15 04:56:48 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtmlheadmeta http-equiv='Content-type' content='text/html; charset=utf-8'titleReact | Event Handling/titlescript src="build/react.min.js"/scriptscript src="build/JSXTransformer.js"/scriptstylea{color:#00f;cursor:pointer;}a:hov

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>React | Event Handling</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
<style>a{color:#00f;cursor:pointer;}a:hover{text-decoration:underline;}</style>
</head>
<body>
<script type="text/jsx">
/** @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);
</script>
</body>
</html>

Normal 跟HTML代码中为某个标签添加事件一样，React指定事件处理函数的方式是一样的，但事件名称必须使用驼峰命名法（如onClick）
Bind 如果事件函数想调用组件变量（即调用this），必须使用bind()把事件函数绑定到组件
autoBind React提供另外一种更简单的事件绑定方式：React.autoBind()

常规用法：

状态触发 - 使用this.setState()从而触发组件render()
服务器交互 - 应用往往会跟服务器的数据读取或保存的交互动作，当请求完毕时使用this.setState()可快速触发组件render()
回调函数 - 我们可以把外部的一个函数作为this.props传入组件
组件交互 - 比较好的解决方法是构建一个高级组件包含各个组件（请看下面的例子）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>React | Event Handling</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
<style>a{color:#00f;cursor:pointer;}a:hover{text-decoration:underline;}</style>
</head>
<body>
<script type="text/jsx">
/** @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);
</script>
</body>
</html>

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!