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

<!DOCTYPE html>@H_403_4@ <html@H_403_4@ lang@H_403_4@="en"@H_403_4@>@H_403_4@ <head@H_403_4@>@H_403_4@ <Meta@H_403_4@ charset@H_403_4@="UTF-8"@H_403_4@>@H_403_4@ <Meta@H_403_4@ name@H_403_4@="Keywords"@H_403_4@ content@H_403_4@="关键词一，关键词二"@H_403_4@>@H_403_4@ <Meta@H_403_4@ name@H_403_4@="Description"@H_403_4@ content@H_403_4@="网站描述内容"@H_403_4@>@H_403_4@ <Meta@H_403_4@ name@H_403_4@="Author"@H_403_4@ content@H_403_4@="刘艳"@H_403_4@>@H_403_4@ <title@H_403_4@>@H_403_4@</title@H_403_4@>@H_403_4@ </head@H_403_4@>@H_403_4@ <body@H_403_4@>@H_403_4@ <div@H_403_4@ id@H_403_4@ = "example@H_403_4@">@H_403_4@</div@H_403_4@>@H_403_4@ </body@H_403_4@>@H_403_4@ </html@H_403_4@>@H_403_4@ <script@H_403_4@ src@H_403_4@ = "build@H_403_4@/jquery-1.11.2.min.js@H_403_4@">@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@ <script@H_403_4@ src@H_403_4@ = "build@H_403_4@/react.js@H_403_4@">@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@ <script@H_403_4@ src@H_403_4@ = "build@H_403_4@/react-dom.js@H_403_4@">@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@ <script@H_403_4@ src@H_403_4@ = "build@H_403_4@/browser.min.js@H_403_4@">@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@ <script@H_403_4@ type@H_403_4@="text/babel"@H_403_4@>@H_403_4@ var@H_403_4@ MyComponent = React.createClass({ handKeyUp: function@H_403_4@ ()@H_403_4@ {@H_403_4@ this@H_403_4@.refs.clone.innerHTML = this@H_403_4@.refs.target.value; },render: function@H_403_4@ ()@H_403_4@ {@H_403_4@ return@H_403_4@ (<div@H_403_4@>@H_403_4@ <div@H_403_4@ ref@H_403_4@ = "clone@H_403_4@" style@H_403_4@ = @H_403_4@@H_403_4@@H_403_4@@H_403_4@{{height@H_403_4@:40+'px@H_403_4@',fontSize@H_403_4@:28+'px@H_403_4@'}}@H_403_4@></div@H_403_4@>@H_403_4@ <input@H_403_4@ type@H_403_4@ = "text@H_403_4@" ref@H_403_4@ = "target@H_403_4@" onKeyUp@H_403_4@ = {this.handKeyUp@H_403_4@}>@H_403_4@</input@H_403_4@>@H_403_4@ </div@H_403_4@>@H_403_4@); } }); ReactDOM.render(<MyComponent@H_403_4@>@H_403_4@</MyComponent@H_403_4@>@H_403_4@,document.querySelector("#example")); @H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@@H_403_4@

实现效果如下：

CSS美化略过，因为主要是学习React使用。
另一种更为简便的写法如下，充分利用react组件的state：

<!DOCTYPE html>@H_403_4@
<html@H_403_4@ lang@H_403_4@="en"@H_403_4@>@H_403_4@
<head@H_403_4@>@H_403_4@
    <Meta@H_403_4@ charset@H_403_4@="UTF-8"@H_403_4@>@H_403_4@
    <Meta@H_403_4@ name@H_403_4@="Keywords"@H_403_4@ content@H_403_4@="关键词一，关键词二"@H_403_4@>@H_403_4@
    <Meta@H_403_4@ name@H_403_4@="Description"@H_403_4@ content@H_403_4@="网站描述内容"@H_403_4@>@H_403_4@
    <Meta@H_403_4@ name@H_403_4@="Author"@H_403_4@ content@H_403_4@="刘艳"@H_403_4@>@H_403_4@
    <title@H_403_4@>@H_403_4@</title@H_403_4@>@H_403_4@
</head@H_403_4@>@H_403_4@
<body@H_403_4@>@H_403_4@
<div@H_403_4@ id@H_403_4@ = "example@H_403_4@">@H_403_4@</div@H_403_4@>@H_403_4@
</body@H_403_4@>@H_403_4@
</html@H_403_4@>@H_403_4@
<script@H_403_4@ src@H_403_4@="build/react.js"@H_403_4@>@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@
<script@H_403_4@ src@H_403_4@="build/react-dom.min.js"@H_403_4@>@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@
<script@H_403_4@ src@H_403_4@="build/browser.min.js"@H_403_4@>@H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@
<script@H_403_4@ type@H_403_4@="text/babel"@H_403_4@>@H_403_4@ var@H_403_4@ Input = React.createClass({ getInitialState: function@H_403_4@()@H_403_4@{@H_403_4@ return@H_403_4@ {value: "Hello"@H_403_4@}; },handleChange: function@H_403_4@ (event)@H_403_4@ {@H_403_4@ this@H_403_4@.setState({value: event.target.value}); },render: function@H_403_4@()@H_403_4@{@H_403_4@ var@H_403_4@ value = this@H_403_4@.state.value; return@H_403_4@ ( <div@H_403_4@>@H_403_4@ <p@H_403_4@>@H_403_4@{value}</p@H_403_4@>@H_403_4@ <input@H_403_4@ type@H_403_4@ = "text@H_403_4@" value@H_403_4@ = {value@H_403_4@} onChange@H_403_4@ = {this.handleChange@H_403_4@} />@H_403_4@ </div@H_403_4@>@H_403_4@ ); } }); ReactDOM.render( <Input@H_403_4@ />@H_403_4@,document.querySelector("#example") ) @H_403_4@@H_403_4@</script@H_403_4@>@H_403_4@

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

猜你在找的React相关文章