React的受控组件和非受控组件介绍

React受控和非受控组件

认识受控组件

在React中，HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。

比如下面的HTML表单元素:

这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;

在React中，并没有禁止这个行为，它依然是有效的;

但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;

实现这种效果的标准方式是使用“受控组件”;

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      username: ""
    }
  }

  handleSubmitClick(event) {
    // 1.阻止默认行为, 防止提交页面刷新
    event.preventDefault()

    // 2.获取到表单的数据
    console.log(this.state.username)

    // 3.之后就可以发送网络请求提交到服务器
  }
  
  changeUsername(event) {
    this.setState({
      username: event.target.value
    })
  }

  render() {
    const { username } = this.state

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
          <label htmlFor="username">
            用户: 
            <input 
              type="text" 
              name="" 
              id="username" 
              value={username} 
              onChange={e => this.changeUsername(e)} 
            />
          </label>
          <button type='submit'>提交按钮</button>
        </form>
      </div>
    )
  }
}

受控组件演练

input文本框

• 在 HTML 中，表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state，并根据用户输入进行更新。
• 而在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们将两者结合起来，使React的state成为“唯一数据源”;

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;

被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”;

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

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

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      inputValue: "abcd"
    }
  }

  inputChange(event) {
    this.setState({
      inputValue: event.target.value
    })
  }

  render() {
    const { inputValue } = this.state

    return (
      <div>
        <input type="text" value={inputValue} onChange={e => this.inputChange(e)}/>
      </div>
    )
  }
}

checkbox标签

texteare标签和input比较相似:

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      isAgree: false
    }
  }

  handleSubmitClick(event) {
    // 1.阻止默认行为, 防止提交页面刷新
    event.preventDefault()

    // 2.获取到表单的数据
    console.log(this.state.isAgree)

    // 3.之后就可以发送网络请求提交到服务器
  }

  inputChange(event) {
    this.setState({
      isAgree: event.target.checked
    })
  }

  render() {
    const { isAgree } = this.state

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
          <label htmlFor="agree">
            {/* 复选框绑定checked */}
            <input 
              id="agree" 
              type="checkbox" 
              checked={isAgree} 
              onChange={e => this.inputChange(e)} 
            /> 
            同意协议
          </label>
          <div>
            <button type='submit'>提交按钮</button>
          </div>
        </form>
      </div>
    )
  }
}

select标签

select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      fruit: "apple"
    }
  }

  handleSubmitClick(event) {
    // 1.阻止默认行为, 防止提交页面刷新
    event.preventDefault()

    // 2.获取到表单的数据
    console.log(this.state.fruit)

    // 3.之后就可以发送网络请求提交到服务器
  }

  changeSelect(event) {
    this.setState({
      fruit: event.target.value
    })
  }

  render() {
    const { fruit } = this.state

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
          <select value={fruit} onChange={e => this.changeSelect(e)}>
            <option value="apple">苹果</option>
            <option value="orgin">橙子</option>
            <option value="banana">香蕉</option>
          </select>
          <div>
            <button type='submit'>提交按钮</button>
          </div>
        </form>
      </div>
    )
  }
}

认识非受控组件(了解)

React推荐大多数情况下使用 受控组件 来处理表单数据:

一个受控组件中，表单数据是由 React 组件来管理的

另一种替代方案是使用非受控组件，这时表单数据将交由DOM节点来处理;

如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。

我们来进行一个简单的演练:

使用ref来获取input元素;

在非受控组件中通常使用defaultValue来设置默认值;

同样，<input type=“checkbox”> 和 <input type=“radio”> 支持 defaultChecked，<select> 和 <textarea> 支持 defaultValue。

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      name: "chenyq"
    }

    this.nameRef = createRef()
  }

  handleSubmitClick(event) {
    // 1.阻止默认行为, 防止提交页面刷新
    event.preventDefault()

    // 2.非受控组件获取值
    console.log(this.nameRef.current.value)

    // 3.之后就可以发送网络请求提交到服务器
  }

  componentDidMount() {
    // 再通过原生的方式监听变化, 不建议, 非受控组件还是在操作DOM
    // this.nameRef.current.addEventListener
  }

  render() {
    const { name } = this.state

    return (
      <div>
          <input type="text" defaultValue={name} ref={this.nameRef} />
          <div>
            <button type='submit'>提交按钮</button>
          </div>
        </form>
      </div>
    )
  }
}