<!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>时间： 2024-08-24 22:57:07