javascript - React 控制组件的幕后解释

Question

这是来自 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} />
    );
  }
}

这呈现了一个 <input>我无法编辑的字段。我只是好奇这是如何通过 react 在内部连接的。谁屏蔽了我的keypress事件？是否 react Hook keypress事件处理程序 e.preventDefault()以确保我无法输入任何内容？

Codepen 网址:https://codepen.io/mudassir0909/pen/MvQwGm?editors=0010

Answer 1

因此，我深入研究了 React 代码库。 React 使用名为 Syntehtic Events 的东西包装所有 native 事件.这里有趣的区别在于，在 native HTML 中，当您使用

注册事件时

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

事件在该特定元素上注册，即 event.currentTarget 的值在上面的例子中总是 myInput .更多关于 event.currentTarget .

如果是 React，让我们考虑以下组件

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 });
  }
}

在handleClick里面事件监听器，如果您获得 native 事件的 currentTarget使用 event.nativeEvent.currentTarget你将永远得到 document作为值(value)。

基本上，React 会监听您的浏览器在 document 处支持的所有类型的事件。在适当的 event.target 上对他们进行级别和委托(delegate)又名 event delegation .

每当你做 onClick/onBlur/onSubmit在你的 JSX 元素中，(简单来说)React 保留了 JSX.Element 的映射。 & 听众。

每当 document 上触发任何事件时, React 检查是否 nativeEvent.target在上述事件 map 上注册了一个事件。如果有，它会调用该监听器。

如果是 controlled示例:除非您注册 onChange修改 state.value 的事件，组件将永远不会重新渲染，即 <input />只是保持以前的形式并且看起来是不可编辑的。

也就是说，每当 input和其他表单元素提供了 value JSX 中的属性，React 对待它们的方式与那些没有 value 的属性不同指定的属性( uncontrolled components )。此外，如果您提供 value，React 开始尖叫的原因属性但不实现 onChange .