React学习（九）：表单

一、react表单

在React中，form表单元素和其他的DOM不一样，因为表单元素通常会保留一个内部的state状态。
1、Html表单
在Html中，像 <input>, <textarea>和<select>等表单元素会维持自身状态，并根据用户输入进行更新。

<form>
    <span>名字:</span>
	<input type="text" name="name" />
	<input type="submit" value="Submit" />
</form>

2、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}>
      	<span>名字:</span>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

二、select 标签

React 在<textarea>和<input>标签都是更新其 value 属性进行更新。
而对<select>标签不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项。
1、Html select标签
在 HTML <select>标签使用 selected 属性来设置选中

<select>
  <option value="grapefruit">葡萄柚</option>
  <option value="lime">酸橙</option>
  <option selected value="coconut">椰子</option>
  <option value="mango">芒果</option>
</select>

2、React select标签
在 React <select>标签并不使用 selected 属性，而是在根 select 标签上使用 value 属性

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('你喜欢的风味是: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
          <span>选择你喜欢的风味:</span>
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

三、多个表单

当处理多个 input 元素时，可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <span>参与:</span>
        <input
          name="isGoing"
          type="checkbox"
          checked={this.state.isGoing}
          onChange={this.handleInputChange} />
        <br />
        <span>来宾人数:</span>
        <input
          name="numberOfGuests"
          type="number"
          value={this.state.numberOfGuests}
          onChange={this.handleInputChange} />
      </form>
    );
  }
}

·········································································································································
本文介绍React表单~~请大家多多指教，能get到知识点不要忘了关注点个赞~。