Javascript react受控组件的幕后解释

以下是React文档中受控组件的代码

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

  render() {
    console.log('render called');
    return (
      <input type="text" value={this.state.value} />
    );
  }
}

类CustomInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
}
render（）{
log（'render called'）；
返回(
);
}
}

这将呈现一个我无法编辑的

字段。我只是好奇react内部是如何连接的。谁在阻止我的

按键

事件？react是否将

keypress

事件处理程序与

e.preventDefault（）

连接起来，以确保我无法键入任何内容

---

代码笔URL:

所以，我对React代码库进行了一些挖掘。React使用名为的内容包装所有本机事件。这里有趣的区别是，在原生HTML中，当您使用

myInput.addEventListener("click", (event) => /** do something */);

事件在该特定元素上注册，即

event的值。在上述示例中，currentTarget

始终是

myInput

。更多关于

在反应的情况下，让我们考虑下面的组成部分

class MyComponent extends React.Component {
  constructor() {
    this.state = {};
  }

  render() {
    return (
      <div>
        <input type="text" click="handleClick" value={this.state.value} />
      </div>
    )
  }

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

类MyComponent扩展了React.Component{ 构造函数（）{ this.state={}； } render（）{ 返回( ) } handleClick=（事件）=>{ this.setState（{value:event.target.value}）； } } 在

handleClick

事件侦听器中，如果使用

event.nativeEvent.currentTarget

获取本机事件的

currentTarget

，则始终会将

文档

作为值

基本上，React会侦听浏览器在

文档

级别支持的所有类型的事件，并将它们委托给相应的aka

每当您在JSX元素中执行

onClick/onBlur/onSubmit

操作时，（简单地说），React会保留一个

JSX.Element

监听器的映射

每当在

文档

上触发任何事件时，React都会检查

nativeEvent.target

是否在上述事件映射上注册了事件。如果有，它将调用该侦听器

在

受控的情况下，例如：除非注册
onChange
事件以修改
状态值
，否则组件重新渲染将永远不会发生，即
仅保持其以前的形式，并且看起来不可编辑

也就是说，只要在JSX中为
输入
&其他表单元素提供了
值
属性，React就会以与未指定
值
属性（）的表单元素不同的方式对待它们。另外，如果您提供了
值
属性，但未实现
onChange
则React开始尖叫，您确定
输入
字段不可编辑吗？@Umesh，注释掉
handleChange