zoukankan      html  css  js  c++  java
  • 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')
    );

  • 相关阅读:
    nyoj_518_取球游戏_201404161738
    nyoj_528_找球号(三)_201404152050
    nyoj_68_三点顺序_201404152013
    nyoj_123_士兵杀敌(四)_201404131143
    树状数组
    nyoj_116_士兵杀敌(二)_201404131107
    hdu_1024_糖果大战_201404021640
    hdu_1205_吃糖果_201404021440
    nyoj_278_排队_201403282135
    nyoj_127_星际之门(一)_201403282033
  • 原文地址:https://www.cnblogs.com/zhangbob/p/6957499.html
Copyright © 2011-2022 走看看