约束性组件( controlled component)与非约束性组件( uncontrolled component)

简介: 约束性组件( controlled component)与非约束性组件( uncontrolled component)

约束性组件(Controlled Component)和非约束性组件(Uncontrolled Component)是在React中常用的两种表单组件的设计模式。

约束性组件是指其值受React组件的状态(state)控制的组件。在约束性组件中,表单元素的值由React组件的状态维护,并通过onChange事件处理函数更新状态。每当用户输入发生变化时,状态会被更新,从而保持组件的值与状态的同步。这种模式使得React组件完全控制表单的值和行为。

class ControlledComponent extends React.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.bind(this)}
      />
    );
  }
}

非约束性组件是指其值不受React组件状态控制的组件。在非约束性组件中,表单元素的值由DOM自身维护,React组件可以通过ref属性获取表单元素的值。这种模式更接近传统的HTML表单处理方式,但在处理复杂表单逻辑时可能需要额外的操作。

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

  handleClick() {
    const value = this.inputRef.current.value;
    // 处理表单值
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick.bind(this)}>Submit</button>
      </div>
    );
  }
}

总的来说,约束性组件提供了更精确的控制和验证,适用于复杂的表单逻辑。非约束性组件则更简洁,适用于简单的表单场景。开发者可以根据具体需求选择适合的模式。

相关文章
|
JavaScript
Vue 综合- provide() 子或孙子组件如何调用Vue对象
Vue 综合- provide() 子或孙子组件如何调用Vue对象
59 0
|
6月前
|
前端开发 开发者
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
100 0
|
1月前
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
414 0
|
4月前
|
JavaScript
vue 动态组件【详解】component :is
vue 动态组件【详解】component :is
329 0
|
缓存 JavaScript
75Vue - 使用 v-once 的低级静态组件(Cheap Static Component)
75Vue - 使用 v-once 的低级静态组件(Cheap Static Component)
30 0
|
6月前
|
JavaScript 前端开发 程序员
功能组件( Functional Component )与类组件( Class Component )如何选择?
功能组件( Functional Component )与类组件( Class Component )如何选择?
43 0
|
6月前
Vue3 使用动态组件 component
Vue3 使用动态组件 component
120 0
|
前端开发 JavaScript
写文章 类组件(Class component)和 函数式组件(Functional component)之间有何区别
写文章 类组件(Class component)和 函数式组件(Functional component)之间有何区别
49 0
|
前端开发 Go 图形学
Unity中查找子组件GameObject或Component的操作汇总
Unity中查找子组件GameObject或Component的操作汇总
163 0
|
JavaScript 开发者
组件切换-使用 Vue 提供的 component 元素实现组件|学习笔记
快速学习组件切换-使用 Vue 提供的 component 元素实现组件
133 0
组件切换-使用 Vue 提供的 component 元素实现组件|学习笔记