反应复选框：event.preventDefault() 中断 onChange 函数 - 为什么？

Question

我刚刚发现了一个流浪的event.preventDefault()，它破坏了我的复选框的onChange 处理程序：

import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      accepted: false
    }
  }

  changeChecked = (event) => {
    this.setState((state) => ({
      accepted : !state.accepted
    }));
    event.preventDefault(); // <- this very bad
  }

  render() {
    return (
      <input
        type="checkbox" 
        onChange={this.changeChecked}
        checked={this.state.accepted}
      />
    );
  }
}

export default App;

产生的行为是第一次点击时正确更新的状态，但复选框仅在下一个重新呈现时更改为“已检查”外观，例如。第二次点击。

这是为什么呢？受控组件的重点不是独立于浏览器事件吗？

有人向我解释这一点肯定会减轻我花费数小时来简化我的复杂用例的痛苦。谢谢！

更新：这是一个快速的Codepen example 演示了奇怪的行为。 我包括了一个“未阻止的复选框”和一个带有阻止的onClick 事件作为比较。 请注意，当我单击 不同 复选框时，阻止 onChange 的那个将其外观切换为实际状态。

Answer 1

尝试将event.preventDefault() 移到this.setState 行上方。

Answer 2

复选框的行为略有不同。您可能知道，preventDefault() 的典型用例是表单的onSubmit() 函数，您将在其中执行自己的 AJAX 调用，因此希望阻止默认表单提交。但是对于复选框（和大多数输入），涉及的内容更多一些。

检查属性

根据MDN，checked 属性是“一个布尔属性，指示是否默认选中此复选框（当页面加载时）。它不指示此复选框是否当前检查：如果复选框的状态发生更改，则此内容属性不会反映更改。”那么以一种有趣的方式，checked 属性与是否检查输入状态之间存在脱节。对于 React，在每次重新渲染时，checked 属性将反映当前状态，但它仍然只是一个默认值，因为输入是新渲染的，并且在状态上次更改后没有被操纵。

原生 eventListener 为 <input type="checkbox" />

此外，在不偏离轨道的情况下，本机更改复选框输入状态的事件实际上是 click 事件，而不是 change 事件。如果您在浏览器的 js 控制台中弄乱了侦听器和复选框输入的值，您会看到您可以以不选中复选框的方式对其进行操作，但节点的值另有说明。

可能的解决方案

基于上述情况，在这种情况下，您不希望阻止默认行为，因为change 事件的默认行为与您想要执行的操作不冲突（并且由于某种原因阻止它会导致问题）。事实上，在React docs examples 中，您会注意到它们在更新受控组件的状态时不使用preventDefault()。我希望我能更好地理解究竟为什么添加preventDefault() 来更改输入处理程序会导致这样的问题，但希望这些小花絮能更清楚地说明问题。