react_09受控组件与非受控组件(二)

受控组件定义:

在HTML中,表单元素(input、textarea、select)之类的表单元素通常自己维护state，并根据用户输入进行更新。
而在React中，可变状态通常保存在组件的state属性中，并且只能通过使用setState()来更新。
1.我们将两者结合起来，使React的state成为“唯一数据源”；
2.渲染表单的React组件还控制着用户输入过程中表单发生的操作;
3.被React以这种方式控制取值的表单输入元素就叫：“受控组件”
简单的受控组件: 形成了单向数据流: 用户input==>onChange==>value

import React, { PureComponent } from "react";
export default class App extends PureComponent {
  constructor(props) {
    super();
    this.state={
      username:''
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e=>this.handleSub(e)}>
          {/* 受控组件 */}
          <label htmlFor="">
            用户名: <input type="text" value={this.state.username}  onChange={e=>this.changeInput(e)}  />
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }
  handleSub(event){
    event.preventDefault();
    console.log(this.state.username);
  }
  changeInput(event){
    console.log(event);
    this.setState({
      username:event.target.value
    })
  }
}

多个输入框的情况优化:

import React, { PureComponent } from "react";
export default class App extends PureComponent {
  constructor(props) {
    super();
    this.state={
      username:'',
      password:'',
      valid:''
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={e=>this.handleSub(e)}>
          {/* 受控组件 */}
          <div>
            <label htmlFor="">
              用户名: <input type="text" name="username" value={this.state.username}  onChange={e=>this.changeInput(e)}  />
            </label>
          </div>
          <div>
            <label htmlFor="">
              密码: <input type="password" name="password" value={this.state.password}  onChange={e=>this.changeInput(e)}  />
            </label>
          </div>
          <div>
            <label htmlFor="">
              验证码: <input type="text" name="valid" value={this.state.valid}  onChange={e=>this.changeInput(e)}  />
            </label>
          </div>
          <input type="submit" value="提交" />
        </form>
      
      </div>
    );
  }
  handleSub(event){
    event.preventDefault();
    const { username, password, valid } = this.state;
    console.log(username,password,valid);
  }
  changeInput(event){
    // es6语法:计算属性名
    this.setState({
      [event.target.name]:event.target.value
    })
  }
}

es6计算属性补充:

// es5中
let name = "first name";
let person = {};

person[name] = "Raaa";
console.log(person[name]); // Raaa
console.log(person["first name"]); // Raaa

// 错误示范
let name = "first name";
let person = {
    name: "Raaa", // 错误
    "last name": "bbit" // 正确
};

在 ES6 的语法中，我们可以直接在字面量定义中使用计算属性，只要使用[]即可，我们甚至可以在[]中书写表达式：

let name = "first name"

let person = {
    [name]:"Raaa",
    ["last"+" name"]:"bbit",
    // 方法也可以用这样的方式定义
    ["say"+"Hello"](){
        console.log("hello");
    }
}
console.log(person["first name"]); // Raaa

非受控组件:如果要使用非受控组件中的数据，那么我们需要使用ref来从DOM 节点中获取表单数据,不推荐这样做。