使用React实现类似快递单号查询效果

发布时间：2020-12-15 03:35:48 所属栏目：百科来源：网络整理

导读：!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 = "

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!