React学习

类组件-受控组件

了解什么是受控组件

表单元素的值被React中的state管控,这个表单就是受控的组件

怎么绑定表单元素

如何绑定表单元素，如：input:text input:checkbox ;value等

import { Component } from 'react';

class App extends Component {
  state = {
    mobile: '13811112222',
    isAgree: true,
  };

  changeMobile = (e) => {
    this.setState({
      mobile: e.target.value,
    });
  };

  changeAgree = (e) => {
    this.setState({
      isAgree: e.target.checked,
    });
  };

  render() {
    return (
      <>
        <div>
          <input
            value={this.state.mobile}
            onChange={this.changeMobile}
            type="text"
            placeholder="请输入手机号"
          />
        </div>
        <div>
          <input
            checked={this.state.isAgree}
            onChange={this.changeAgree}
            type="checkbox"
          />
          同意用户协议和隐私条款
        </div>
      </>
    );
  }
}
export default App;

类组件-非受控组件

没有通过 state 控制的表单元素，它自己控制自身的值，就是非受控组件

通过 ref 获取表单元素获取非受控组件的值

import { Component, createRef } from 'react';

class App extends Component {
  // 获取非受控组件的值
  // 1. 通过createRef创建一个ref对象
  // 2. 给元素绑定ref属性值为创建的ref对象
  // 3. 通过ref对象的current获取元素，再获取它的值
  mobileRef = createRef();

  getMobile = () => {
    console.log(this.mobileRef.current.value);
  };

  render() {
    return (
      <>
        <div>
          {/* 没有被state控制的表单原生认为是非受控组件 */}
          <input ref={this.mobileRef} type="text" placeholder="请输入手机号" />
          <button onClick={this.getMobile}>获取</button>
        </div>
      </>
    );
  }
}
export default App;