react受控组件与非受控组件-阿里云开发者社区

react受控组件与非受控组件

2023-12-20 46

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： react受控组件与非受控组件

React中的组件可以分为受控组件和非受控组件：

受控组件：受控组件是指组件的值受到React组件状态的控制。通常在组件中，我们会通过state来存储组件的值，然后再将state的值传递给组件的props，从而实现组件的双向数据绑定。

例如，一个input输入框的value值就是一个受控组件，其值受到state的控制：

class InputComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

非受控组件：非受控组件是指组件的值不受React组件状态的控制，通常是在组件中获取DOM元素的值，然后进行操作。

例如，一个input输入框的defaultValue值就是一个非受控组件，其值由DOM元素控制：

class InputComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event) {
    console.log(this.inputRef.current.value);
  }
  render() {
    return (
      <div>
        <input type="text" defaultValue="default" ref={this.inputRef} />
        <button onClick={this.handleClick}>Get Input</button>
      </div>
    );
  }
}