1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="../build/react.js"></script>
    5. <script src="../build/react-dom.js"></script>
    6. <script src="../build/browser.min.js"></script>
    7. </head>
    8. <body>
    9. <div id="example"></div>
    10. <script type="text/babel">
    11. var Input = React.createClass({
    12. getInitialState: function() {
    13. return {value: 'Hello!'};
    14. },
    15. handleChange: function(event) {
    16. this.setState({value: event.target.value});
    17. },
    18. render: function () {
    19. var value = this.state.value;
    20. return (
    21. <div>
    22. <input type="text" value={value} onChange={this.handleChange} />
    23. <p>{value}</p>
    24. </div>
    25. );
    26. }
    27. });
    28. ReactDOM.render(<Input/>, document.getElementById('example'));
    29. </script>
    30. </body>
    31. </html>
    33. 01、文本输入框的值，不能用 this.props.value 读取,而要定义一下onChange 事件的回调函数，
    34. 通过 event.target.value 读取用户输入的值 textarea ,select ,radio 元素都属于这种情况。