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')
);

 

转载于:https://www.cnblogs.com/zhangbob/p/6957499.html