基本概念

• 没有 state 的组件叫做无状态组件,, 有 state 的组件叫做有状态组件
• 区分受控与非受控是看组件中的数据是否是由父组件的 props 控制的, 如果完全是由父组件的 props 来控制的, 则是受控组件, 否则就是非受控组件

  相关案例

  非受控表单组件

• 以下的代码, 如果只是单独使用的话, 则没有什么问题, 但是, 如果要将 input 输入框的值传递到其他的组件中之类的, 则不行, 如下面代码中的 Child 组件一样, 当 input 输入框的值发生改变之后, Child 中的值并不会随之改变, 因为 render 函数并没有执行, 而 render 函数执行的条件则是重新执行了 setState 函数, 所以如果想要传递给其他地方用的话, 则需要使用状态 state, 即受控组件.

import React, {Component, createRef} from 'react';

class App extends Component {
  usernameRef = createRef()

  login = () => {
    console.log(this.usernameRef.current.value);
  }

  onReset = () => {
    this.usernameRef.current.value = ''
  }
  render() {
    return (
      <div>
        <input ref={this.usernameRef} type="text" defaultValue='xiaoming'/>
        <button onClick={this.login}>登录</button>
        <button onClick={this.onReset}>重置</button>

        {/*<Child username={this.usernameRef.current.value}></Child>*/}
      </div>
    );
  }
}

export default App;

受控表单组件

import React, {Component, createRef} from 'react';

class App extends Component {
  state = {
    username: ''
  }

  getInputValue = (event) => {
    this.setState({
      username: event.target.value
    })
  }

  login = () => {
    console.log(this.state.username);
  }

  onReset = () => {
    this.setState({
      username: ''
    })
  }
  render() {
    return (
      <div>
        {/*此时 onChange 和 onInput 的效果是一样的, 每输入一个内容都会监听到, 但是原生 js 中则不是, 原生中 onChange 是监听失去焦点后的事件, onInput 是监听键盘输入的事件*/}
        <input type="text" value={this.state.username} onChange={this.getInputValue}/>
        <button onClick={this.login}>登录</button>
        <button onClick={this.onReset}>重置</button>
      </div>
    );
  }
}

export default App;