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>字段。我只是好奇这是如何通过反应在内部连线。谁阻止了我的keypress事件？是否会将keypress事件处理程序与e.preventDefault()挂钩以确保我无法输入任何内容？

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

Answer 1

所以，我做了一些深入研究React代码库。 React使用名为Syntehtic Events的东西包装所有本机事件。这里有趣的区别是，当您使用

注册事件时，在本机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事件监听器中，如果您使用currentTarget获取原生事件event.nativeEvent.currentTarget，则始终会获得document作为值。

基本上，React会在document级别监听您的浏览器支持的所有类型的事件。将他们委派给适当的event.target又名event delegation。

每当你在JSX元素中进行onClick/onBlur/onSubmit时（简单来说），React会保留JSX.Element＆amp;的映射。听众。

每当在document上触发任何事件时，React会检查nativeEvent.target是否在上述事件地图上注册了事件。如果有，则调用该侦听器。

如果是controlled示例：除非您注册onChange事件以修改state.value，否则组件重新呈现将永远不会发生，即<input />仅停留在它以前的形式＆amp;看起来它是不可编辑的。

也就是说，每当input＆amp;其他表单元素在JSX中提供了value属性，React以不同于未指定value属性（uncontrolled components）的方式处理它们。此外，如果您提供value属性但未实施onChange，React会开始尖叫的原因。

反应控制组件的幕后解释

1 个答案: