1. 程式人生 > >使用React實現類似快遞單號查詢效果

使用React實現類似快遞單號查詢效果

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