<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="Keywords" content="关键词一，关键词二"> <Meta name="Description" content="网站描述内容"> <Meta name="Author" content="刘艳"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src = "build/jquery-1.11.2.min.js"></script> <script src = "build/react.js"></script> <script src = "build/react-dom.js"></script> <script src = "build/browser.min.js"></script> <script type="text/babel"> var MyComponent = React.createClass({ handKeyUp: function () { this.refs.clone.innerHTML = this.refs.target.value; },render: function () { return (<div> <div ref = "clone" style = {{height:40+'px',fontSize:28+'px'}}></div> <input type = "text" ref = "target" onKeyUp = {this.handKeyUp}></input> </div>); } }); ReactDOM.render(<MyComponent></MyComponent>,document.querySelector("#example")); </script>
实现效果如下：
CSS美化略过，因为主要是学习React使用。
另一种更为简便的写法如下，充分利用react组件的state：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="Keywords" content="关键词一，关键词二">
<Meta name="Description" content="网站描述内容">
<Meta name="Author" content="刘艳">
<title></title>
</head>
<body>
<div id = "example"></div>
</body>
</html>
<script src="build/react.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel"> var Input = React.createClass({ getInitialState: function(){ return {value: "Hello"}; },handleChange: function (event) { this.setState({value: event.target.value}); },render: function(){ var value = this.state.value; return ( <div> <p>{value}</p> <input type = "text" value = {value} onChange = {this.handleChange} /> </div> ); } }); ReactDOM.render( <Input />,document.querySelector("#example") ) </script>
