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

posted @ 2016-08-26 17:11  GumpYan  阅读(350)  评论(0)  编辑  收藏  举报