React 组件的受控组件和非受控组件 笔记

在 React 中，受控组件和非受控组件是两种不同的表单处理方式。

受控组件

在受控组件中，表单数据由 React 组件的状态（state）来管理。表单的值和 React 组件的状态是同步的，React 组件通过更新状态来控制表单的值。

以下是一个受控组件的例子：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  render() {
    return <input type="text" value={this.state.value} onChange={this.handleChange} />;
  }
}

export default MyComponent;

在这个例子中，input 元素的值由 state 中的 value 属性控制。当用户在 input 元素中输入内容时，handleChange 方法会被调用，更新 state 中的 value 属性。input 元素的 value 属性被设置为 state 中的 value 属性，这样 input 元素的值就会与 state 中的 value 属性保持同步。此处注意onChange，小驼峰写法，原生dom元素是onchange。

非受控组件

在非受控组件中，表单数据由 DOM 元素本身来管理。React 组件通过 ref 来访问表单的值。请勿过度使用ref

以下是一个非受控组件的例子：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    console.log(this.inputRef.current.value);
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

export default MyComponent;

在这个例子中，input 元素的值由 DOM 元素本身管理。ref 被用于访问 input 元素的值。当用户在 input 元素中输入内容时，input 元素的值会被更新。当用户点击按钮时，handleClick 方法会被调用，访问 input 元素的值。

总的来说，受控组件和非受控组件各有优缺点。受控组件更易于管理，但可能需要更多的代码。非受控组件更简单，但可能需要更多的 DOM 操作。应该根据具体的需求和场景来选择使用哪种组件。