react受控组件与非受控组件

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

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

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

jsx 复制代码
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元素控制:

jsx 复制代码
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>
    );
  }
}

总的来说,受控组件和非受控组件的选择取决于具体的业务需求和开发者的个人习惯。在大多数情况下,如果需要实现表单的双向数据绑定,就应该使用受控组件;而如果需要获取DOM元素的值,就应该使用非受控组件。

相关推荐
逐·風2 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫31 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js