下面的代码展示了在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节点。
原文链接：https://www.f2er.com/react/307311.html