React 受控组件&非受控组件（4）

受控组件是通过绑定事件的方式，及时获取组件状态的变化，适合即时的数据验证
非受控组件是通过 React.createRef 创建的引用来获取需要的元素(状态)，灵活性更高，开发者可以在需要时随时调用

受控组件

const hobbiesData = [
  {
    name: "钢琴",
    value: "piano",
  },
  {
    name: "读书",
    value: "read",
  },
  {
    name: "游泳",
    value: "swiming",
  },
];

class App extends React.Component {
  state = {
    username: "",
    sex: "meal",
    isStudent: true,
    hobbies: [],
  };

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }
  handleStuChange(isStudent) {
    this.setState({
      isStudent,
    });
  }

  handleHobbiesChange(e) {
    console.log(111, e.target.value);
    this.setState({
      hobbies: [...this.state.hobbies, e.target.value],
    });
  }

  submit() {
    console.log(this.state);
  }
  reset() {
    this.setState({
      username: "",
      sex: "meal",
    });
  }

  render() {
    const { username, sex, isStudent, hobbies } = this.state;
    return (
      

        

          用户名：
          
        

        

          性别：
          
            男
            女
          
        

        

          学生：
          
          是|
          
          否
        

        

          hobbys：
          {hobbiesData.map((item) => {
            return (
              
                {item.name}
                
              
            );
          })}
        

        

          submit
           this.reset()}>reset
        
      
    );
  }
}

ReactDOM.render(, document.querySelector("#app"));

非受控组件

表单数据不受控于 state，使用 React ref 从 DOM 节点中获取表单数据的组件

class App extends React.Component {
  constructor(props) {
    super(props);
    // 推荐使用：React.createRef()
    this.usernameRef = React.createRef();
    this.pwdRef = React.createRef();
    this.genderRef = React.createRef();
    this.fileRef = React.createRef();
  }

  handleChange(e) {
    // refs 被弃用了
    // console.log(this.refs.usernameRef.value);

    this.setState({
      // [e.target.name]: this.refs.usernameRef.value,
      [e.target.name]: this.usernameRef,
    });
  }

  submit(e) {
    e.preventDefault();
    console.log(this.usernameRef.current.value);
    console.log(this.genderRef.current.value);
    console.log(this.fileRef.current.value);
  }
  reset(e) {
    e.preventDefault();
    this.usernameRef.current.value = "";
  }

  render() {
    return (
      

        

          用户名：
          
        

        

          {/* 
            form field 默认值
            组件挂载完毕后更新，不会导致 DOM 的任何更新
          */}
          
            男
            女
          
        

        

          
        

        

          submit
           this.reset(e)}>reset
        
      
    );
  }
}

ReactDOM.render(, document.querySelector("#app"));

受控组件&非受控组件
如果在表单组件中，需要进行立即/动态数据验证，使用受控组件，否则使用非受控组件