React-表单操作

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取

<!DOCTYPE html>

<html lang="zh-cn">

<head>

  <meta charset="UTF-8">

  <title>表单</title>

  <script src="./build/react.js"></script>

  <script src="./build/react-dom.js"></script>

  <script src="./build/browser.min.js"></script>

  <script src="./build/jquery.min.js"></script>

</head>

<body>

  <div id="container"></div>

</body>

  <script type="text/babel" >

   $(document).ready(function(){

    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>

          <input type="text" value={value} onChange={this.handleChange}/>

          <p>{value}</p>

          </div>

        );

       }

    });

    ReactDOM.render(<Input/>,document.getElementById('container'));

   });

  </script>

</html>

　　上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。

getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。例子中用var value={this.state.value}读取getInitialState读取当中的value值。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

参考文档：http://www.ruanyifeng.com/blog/2015/03/react.html

巴特西

React-表单操作

最新文章

热门文章