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

最新推荐文章于 2024-08-04 13:47:51 发布

yubo_725

最新推荐文章于 2024-08-04 13:47:51 发布

阅读量1.2w

点赞数 1

分类专栏： React js

本文链接：https://blog.csdn.net/yubo_725/article/details/50532278

版权

React js 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

下面的代码展示了在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节点。