<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name = "Keywords" content = "keyword 1, keyword 2" >
< meta name = "description" content = "website description content" >
< meta name = "author" content = "Liu Yan" >
<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>
The implementation results are as follows:
CSS landscaping skipped over, as the main is to learn react use.
Another easier way to do this is to take advantage of the state of the react component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< meta name = "Keywords" content = "keyword 1, keyword 2" >
< meta name = "description" content = "website description content" >
< meta name = "author" content = "Liu Yan" >
<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>
Use react to achieve similar express tracking number query effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
