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

  • 相关阅读:
    线程 定时任务 实现思路
    Days Floating In ShenZhen(1)
    由于未能找到具有自动生成的控件来引发回发事件,导致发生错误
    在ASP.NET中使用AJAX.NET (转译自MSDN)(二)
    Every Time I Wake up I want sleep more
    漂泊在深圳的日子2
    512今日历程
    流金岁月
    对自己的思考
    关于绑定自动生成的下拉式菜单的错误
  • 原文地址:https://www.cnblogs.com/zhangbob/p/6957499.html
Copyright © 2011-2022 走看看