使用React實現類似快遞單號查詢效果
阿新 • • 發佈:2019-02-03
<!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>