非受控组件，让表单更自由

前端

2023-12-27 19:32:07

巧妙运用非受控组件，解锁 React 中灵活的 DOM 控制

在 React 的世界中，非受控组件 为我们提供了掌控 DOM 节点的独特方式，释放了数据管理的灵活性。它们与受控组件 形成鲜明对比，让我们可以脱离 React 的束缚，直接与 DOM 交互。

非受控组件的魅力

非受控组件最大的特点在于，它们的数据不再由 React 组件管理，而是交由 DOM 节点掌控。这带来了以下几个显著优势：

灵活性无界： 非受控组件允许我们直接操作 DOM 节点，绕过 React 的数据流机制，从而实现更自由、更灵活的数据处理。
性能优化： 由于省去了数据流的管理，非受控组件可以减少不必要的渲染，优化表单性能，尤其是在大型表单场景下。
代码精简： 少了数据管理的代码，非受控组件的结构更加简洁，维护也更方便。

获取 DOM 数据的妙招：refs

为了从 DOM 节点中获取数据，我们巧妙地利用了refs 属性。refs 允许我们在组件中引用 DOM 节点，只需在 DOM 节点上添加 ref 属性，并在组件中使用 this.refs.节点名称来访问该节点。

例如，以下代码展示了如何在非受控组件中使用 refs 获取 input 框中的值：

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();

    const value = this.inputRef.current.value;

    console.log(value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">提交</button>
      </form>
    );
  }
}