javascript - react 复选框 : 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

复选框的行为略有不同。您可能知道，preventDefault() 的典型用例是 onSubmit()表单的功能，您将在其中执行自己的 AJAX 调用，因此希望阻止默认表单提交。但是对于复选框(和大多数输入)，涉及的内容更多。
选中的属性
根据 MDN , checked属性是“一个 bool 属性，指示是否默认选中此复选框(当页面加载时)。它不指示当前是否选中此复选框:如果复选框的状态发生更改，则此内容属性不反射(reflect)更改。 "有趣的是，checked 之间存在脱节。属性，以及是否检查输入的状态。对于 React，在每次重新渲染时，checked属性将反射(reflect)当前状态，但它仍然只是一个默认值，因为输入是新呈现的，并且自状态上次更改以来没有被操纵。
原生 eventListener对于 <input type="checkbox" />此外，在不偏离轨道的情况下， native 更改复选框输入状态的事件实际上是 click事件，而不是 change事件。如果您在浏览器的 js 控制台中弄乱了监听器和复选框输入的值，您会看到您可以以不选中复选框的方式对其进行操作，但节点的值却另有说明。
可能的解决方案
基于上述，在这种情况下，您不想阻止默认行为，因为 change 上的默认行为事件与您想做的事情不冲突(并且由于某种原因阻止它会导致问题)。事实上，在 React docs examples ，您会注意到他们不使用 preventDefault()更新受控组件的状态时。我希望我能更好地理解为什么要添加 preventDefault()更改输入的处理程序会导致这样的问题，但希望这些小花絮能更清楚地说明问题。