8, ReactJs basics 08-- form

 1, the controlled components

 Since the value attribute in the form element, the value will always be displayed this.state.value, which makes the state React as the only source of data.

 Since handlechange will be executed each time the button and the updated state React, state each update, the render functions are executed, the value will be displayed as the user input is updated.

 This enables two-way data binding

      class NameForm extends React.Component {
        constructor(props) {
          super(props);
          // 受控组件的state
          this.state = {value: 'default'};

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

        // 改变时更新state
        handleChange(event) {
          this.setState({value: event.target.value});
        }

        handleSubmit(event) {
          alert('提交的名字: ' + this.state.value);
          event.preventDefault();
        }

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

  2, in HTML, <textarea> element defines the text by its child elements

    In the React, <textarea> used instead of the value attribute.

    Thus, use can be made <textarea> form input and single-line form very similar 

      <textarea> 
        Hello, this is where the text in the text area
       </ textarea>    

 3, in HTML, <select> tag to create a drop-down list to select the properties option selected by the

       React while not using the selected property, but the use value property on the root select the label.

       This is more convenient in a controlled assembly, because you only need to update it in the root tag

       And it may also be passed to the array attribute value, to select a plurality of support tabs select options:

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}>
              <label>
                选择你喜欢的风味:
                <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>
              </label>
              <input type="submit" value="提交" />
            </form>
          );
        }
      }

4, a plurality of input processing

 When you need to handle multiple input elements, we can add a name attribute to each element, and let the handler based on the value of the operation to be performed to select 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>
              <label>
                参与:
                <input
                  name="isGoing"
                  type="checkbox"
                  checked={this.state.isGoing}
                  onChange={this.handleInputChange} />
              </label>
              <br />
              <label>
                来宾人数:
                <input
                  name="numberOfGuests"
                  type="number"
                  value={this.state.numberOfGuests}
                  onChange={this.handleInputChange} />
              </label>
            </form>
          );
        }
      }

5, specify the value of the controlled components in the prop will prevent users from changing the input.

      If you specify a value, but can still edit the input, it may be that you accidentally set the value to undefined or null.