用户在表单填入的内容,属于用户跟组件的互动,所以不能用 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