4、React对组件的DOM事件监听

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

导读：下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听： !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleState/titlescript type="text/javascript" src="../react-0.13.0/build/react.js"/scriptscript type="text/javascrip

下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>State</title>
	<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
	<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/jsx">
		var HelloWorld = React.createClass({
			handleClick: function() {
				alert('you click me!');
			},handleChange: function(event){
				//通过React.findDOMNode()拿到真实的DOM对象
				var node = React.findDOMNode(this.refs.inputContent);
				node.innerHTML = event.target.value;
			},render: function() {
				return (
					<div>
						<button onClick={this.handleClick}>Hello</button>
						<br/>
						<input type="text" onChange={this.handleChange} />
						<span ref="inputContent"></span>
					</div>
				);
			}
		});
		React.render(
			<HelloWorld />,document.getElementById('container')
		);
	</script>
</body>
</html>

浏览器中执行结果如下：

点击按钮后，会弹出提示框，在输入框中输入文本后，输入框后面会动态显示出输入的文本。

下面解释以上代码：

在组件的render函数中，创建了一个<button>标签，JSX添加事件监听函数，都是以驼峰命名法，跟html中onclick不同的是，JSX中写作onClick，然后指定处理函数为{this.handleClick}，同理，html中的onchange在JSX中写作onChange，后面指定的处理函数为{this.handleChange}，在input标签后面，还有一个<span>标签，我们为该标签设置了一个ref属性，该属性是JSX中的属性，在组件中，可以通过this.refs.属性值来获取某个虚拟的dom节点，然后用React.findDOMNode()可以获取真实的DOM节点。

（编辑：李大同）

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