React之表单

Posted Wayne Zhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React之表单相关的知识,希望对你有一定的参考价值。

 

第一部分:表单基础

在React中,修改表单的唯一途径是使用setState方法。举例如下:

  

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ‘‘};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(A name was submitted:  + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById(root)
);

 

 

  在codepen的运行代码连接

  

  我们可以看出其运行逻辑:首先将组建渲染到页面,及执行了render(),此时获取的value为空,当我们输入数据时,触发handleChange函数(注意:要提前绑定在当前环境下),然后设置state中的value为用户当前输入值,于是表单元素input获取到最新的state并使用虚拟dom与真实dom作对比,只更新有变化的dom...  当点击提交按钮时,触发了handleSubmit函数。

  值得注意的是:在handleSubmit函数中,我们使用event.preventDefault()阻止了默认行为,即:提交表单后,不会自动reset表单,而是保留之前的用户数据!

 

第二部分:textarea表单

  textarea表单和Input表单本身是没有什么区别的,举例如下所示:

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: Please write an essay about your favorite DOM element.
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(An essay was submitted:  + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} style={{color:red,width:400px,height:15px}} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
<EssayForm/>,
document.getElementById(root)
);

   这里我设置了初始状态,所以一开始我们就可以在textarea中看到内容,稍有不同的是,我还在textarea中设置了样式(注意:要用两个curly brace,外面的表示包含js对象,里面的表示包含一个样式对象,当然我们也可以在外面先定义对象然后再传进来)。

  另外,我们还可以直接在css中设置样式,如下所示:

textarea{
  background:red;
  color:white !important;
}

  这样,背景颜色为红色,字体为白色。

  注意:因为在React中设置的style是行内样式,优先级较高,故在外联样式中无法覆盖,只有通过使用!important的方式才能成功覆盖。

 

  另外,将样式对象传入的方法如下:

render() {
    var myStyle = {
        width:400px,
        height:15px,
        color:red
                  }; 
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <textarea value={this.state.value} onChange={this.handleChange} style={myStyle} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );

 

 

 

 

第三部分:select表单

  例子如下所示:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: coconut};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert(Your favorite flavor is:  + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FlavorForm />,
  document.getElementById(root)
);

 

连接。

以上是关于React之表单的主要内容,如果未能解决你的问题,请参考以下文章

react之form表单工具:formik+yup

React 之form表单selecttextareacheckbox使用

react 之 fetch 登录请求formData提交参数

Python Tornado初学笔记之表单与模板

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

React开发(130):ant design学习指南之form中的新城多个表单