如何理解受控和非受控件组件?

受控组件: 受控组件是React中的一种组件,其特点是输入框的值(value)由React状态(state)控制。也就是说,React中的状态变化会直接影响输入框的值。受控组件通过form的输入元素(input, select等)的value属性绑定到状态上,然后通过onChange事件来更新状态。也就是说,用户在输入框中的输入会触发onChange事件,然后更新React状态,进而重新渲染组件。

例如:

javascript 复制代码
class Controlled extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

  handleInputChange = (event) => {
    this.setState({
      inputValue: event.target.value,
    });
  };

  render() {
    return (
      <input 
        type="text"
        value={this.state.inputValue}
        onChange={this.handleInputChange}
      />
    );
  }
}
  1. 非受控组件: 非受控组件与受控组件相反,输入框的值不由React状态控制,而是由用户输入的内容直接赋值。非受控组件只接受并响应来自用户的事件,例如onChange事件。它们不会影响输入元素的值。非受控组件主要用于处理一些不希望React状态改变的场景,例如一些只读或者只写的输入框。

例如:

javascript 复制代码
class Uncontrolled extends React.Component {
  constructor(props) {
    super(props);
  }

  handleInputChange = (event) => {
    console.log(event.target.value);  // 输出用户输入的值
  };

  render() {
    return (
      <input 
        type="text"
        value={this.props.value}  // 由外部传入的值控制输入框的值
        onChange={this.handleInputChange}
      />
    );
  }
}

总结:受控和非受控是两种处理表单输入元素的方式,受控组件完全依赖于React的状态和事件系统,而非受控组件则更加自由,但也需要自行处理更多的事情。

相关推荐
Li_Ning2125 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu2 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c2 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪2 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆2 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。3 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui