综合事件在功能组件中没有按预期工作

Question

我有 2 个示例，一个带有 class 组件，一个带有功能组件，做的事情完全相同。我正在使用 React 16.13.1。我知道，如果您不坚持该事件，您将收到一条错误消息，指出事件目标为空。这在 class 组件中按预期发生。但是在功能组件中，情况并非如此。它们有什么区别？

export class App extends React.Component {
  constructor() {
    super();
    this.state = { text: '' };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    console.log(event.target.value);
    this.setState(() => ({
      text: event.target.value
    }));
  }
  render() {
    return (
      <div>
        <span>Text: </span>
        <input onChange={this.handleChange} value={this.state.text} />
      </div>
    );
  }
}


const App = () => {
  const [state, setState] = useState({ text: "" });
  const handleChange = (event) => {
    console.log(event.target.value);
    setState({
      text: event.target.value,
    });
  };

  return (
    <div>
      <span>Text: </span>
      <input onChange={handleChange} value={state.text} />
    </div>
  );
};

Answer 1

这一切都取决于调用 this.setState() 和 setState() 的时间。在您的 class 组件中， this.setState 内的附加箭头函数声明会导致额外的延迟，使调用花费的时间比功能组件中的 useState 挂钩更长。如果您使用 100 的 setTimeout 包装功能组件中的 setState() 调用，您会收到预期的错误。此外，如果您在 class-based 组件中将 setState 调用修改为 this.setState({ text: event.target.value })，您将不再收到错误。终于在官方 React docs.

的启发下弄明白了

综合事件在功能组件中没有按预期工作

Synthetic event doesnt work as expected in function component

event-handling

synthetic

reactjs