React中的表单处理

React的表单算是React的一个坑了，由于React在浏览器显示的是虚拟的DOM，我们在表单输入值后直接提交，是无法获取到这个值的。对此，官方给出的解决办法是：先把输入的值存放在组件的状态（state）中，之后通过状态的改变更新页面内容，从而显示出正确的值，用户提交的也是从state里获取的表单的value。参考网址：http://www.css88.com/react/docs/forms.html

class Tab extends React.Component{

　　constructor(props) {

　　　　super(props);

　　　　this.state = {value: ''};

　　}

　　handleChange(event) {

　　　　this.setState({value: event.target.value}); //用户输入值是改变状态里面存放的值

　　}

　　handleSubmit(event) {

　　　　event.preventDefault(); //阻止表单默认提交

　　　　if (!this.state.value) {

　　　　　　alert('提交内容不能为空！');

　　　　　　return;

　　　　};

　　　　alert('Submit text is ' + this.state.value); //这里可以写入ajax代码

　　}

　　render() {

　　　　return <form action="#" method='post' onSubmit={this.handleSubmit.bind(this)}>

　　　　　　　　　　<ul>

　　　　　　　　　　　　<li>

　　　　　　　　　　　　　　<input type='text' value={this.state.value} onChange={this.handleChange.bind(this)}/>

　　　　　　　　　　　　</li>

　　　　　　　　　　　　<li>

　　　　　　　　　　　　　　<input type='submit'/>

　　　　　　　　　　　　</li>

　　　　　　　　　　</ul>

　　　　　　　　</form>

　　}

};

ReactDOM.render(

　　<Tab />,

　　document.getElementById('main')

);