8、ReactJs基础知识08--表单

 1、受控组件

 由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。

 由于 handlechange 在每次按键时都会执行并更新 React 的 state，state每次更新，render函数都会执行，因此显示的值将随着用户输入而更新。

 这就实现了双向数据绑定

      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、在 HTML 中, <textarea> 元素通过其子元素定义其文本

    而在 React 中，<textarea> 使用 value 属性代替。

    这样，可以使得使用 <textarea> 的表单和使用单行 input 的表单非常类似 

      <textarea>
        你好， 这是在 text area 里的文本
      </textarea>    

 3、在 HTML 中，<select> 创建下拉列表标签，通过option的selected属性来选中的

       而React 并不会使用 selected 属性，而是在根 select 标签上使用 value 属性。

       这在受控组件中更便捷，因为你只需要在根标签中更新它

       并且也可以将数组传递到 value 属性中，以支持在 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('你喜欢的风味是: ' + 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、处理多个输入

 当需要处理多个 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>
              <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、在受控组件上指定 value 的 prop 会阻止用户更改输入。

      如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。