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

  • 相关阅读:
    JSOIWC2019游记
    基础网络流题单
    【题解】Luogu P2472 [SCOI2007]蜥蜴
    【题解】Luogu P2057 [SHOI2007]善意的投票
    凸包略解
    【题解】Luogu P4324 [JSOI2016]扭动的回文串
    【题解】Luogu P4054 [JSOI2009]计数问题
    kruscal重构树略解
    【题解】bzoj 4478 [Jsoi2013]侦探jyy
    【题解】4465 [Jsoi2013]游戏中的学问
  • 原文地址:https://www.cnblogs.com/zhangbob/p/6957499.html
Copyright © 2011-2022 走看看