React之表单

Posted 2020-08-29 Wayne Zhu

 

第一部分：表单基础

在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‘)

);

 

连接。