React-----form（表单）

概述：

React表单和html表单的区别就是，前者分工明确，后者html似乎夹杂着其它功能（本来觉得有js处理的提交功能）

1.html下表单

<form>  <label>    Name:    <input type="text" name="name" />  </label>  <input type="submit" value="Submit" /></form>

2.React的表单

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

总结：1.咋一看，React写代码多了，比直接html更复杂，其实它的分工更加明确了。

    2.React面向对象编程思想，这个表单就可以是一个单独对象，可以独立使用渲染，

    3.React的html和js在内部分开，而对外是一个整体，达到封装的效果。

    4.handleChange(event),由于全局绑定this，所以它应该拥有event事件对象，event.target.value表示输入的值

3.textarea(文本域)

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} />        </label>        <input type="submit" value="Submit" />      </form>    );  }
}
这文本域跟input输入框语法是一样的，只是它有初始值，也就是构造函数初始化value的值，可以通过this.state.value获得。
4.select标签：
html下格式
<select>  <option value="grapefruit">Grapefruit</option>  <option value="lime">Lime</option>  <option selected value="coconut">Coconut</option>  <option value="mango">Mango</option></select>
 react下格式
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>    );  }}

总结：
1.在html中对于选择一个标签我们会使用selected属性，而在React中直接在Select设置value属性来设置定属性值，React的value可以在初始化的时候设置
2.React分工明确，后期维护html显得有点乱，因为初始值都是设置死值
5.如何在一个处理函数处理多种输入标签
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>        <label>          Is going:          <input            name="isGoing"            type="checkbox"            checked={this.state.isGoing}            onChange={this.handleInputChange} />        </label>        <br />        <label>          Number of guests:          <input            name="numberOfGuests"            type="number"            value={this.state.numberOfGuests}            onChange={this.handleInputChange} />        </label>      </form>    );  }}ReactDOM.render(  <Reservation />,  document.getElementById('root'));
总结：1、一个复选框和数字框都绑定了handleInputChange,它们怎么区分呢？本质上就是类型不一样，通过触发事件的类型进行区分
            2、  event.target.type目标事件类型， event.target.name目标事件的名称。
    3、注意[name] 在设置状态的引用的引用name的值，这是ES6的语法，它等同于如下
var partialState = {};partialState[name] = value;this.setState(partialState);

总结：总体来说React表单就是html+js形成一个对象，在内部处理分工明确。