React非受控组件

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。

例如，下面的代码使用非受控组件接受一个表单的值：

import React, { Component } from 'react';

// 受控组件 --- value 配合 onChange 且value的值为state中的值
export default class App extends Component {
  // ref的字符串类型被废弃，在严格模式下是报出警告
  render() {
    return (
      <div>
        <input ref="firstName" type="text" onChange = { this.firstHandler }/>   
        <input ref="lastName" type="text" onChange = { this.LastHandler } /> 
        <button onClick = { () => {
          console.log('firstName', this.refs.firstName.value)
          console.log('lastName', this.refs.lastName.value)
        }}>获取数据</button>
      </div>
    );
  }
}

import React, { Component } from 'react';

// 受控组件 --- value 配合 onChange 且value的值为state中的值
export default class App extends Component {
  firstNameRef = React.createRef() 
  lastNameRef = React.createRef() 
  // ref的字符串类型被废弃，在严格模式下是报出警告
  render() {
    return (
      <div>
        <input ref={ this.firstNameRef } type="text" onChange = { this.firstHandler }/>   
        <input ref={ this.lastNameRef } type="text" onChange = { this.LastHandler } /> 
        <button onClick = { () => {
          console.log('FirstName', this.firstNameRef.current.value)
          console.log('lastName', this.lastNameRef.current.value)
        }}>获取数据</button>
      </div>
    );
  }
}

因为非受控组件将真实数据储存在 DOM 节点中，所以在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。