Question

我希望能够手动控制复选框的值。我不希望其已选中/未选中状态与点击相关联。我的意思是我想要处理点击事件，但我想自己更新点击的已检查/未检查状态 - 并阻止复选框自动执行此操作。

限制：我还不能使用受控组件（由于某些原因）。

例如，我想要这样的功能：当用户选中一个复选框时，我想限制她取消选中它。尝试下面实现它不起作用：

<input
id={chId}
type="checkbox"
onClick={(e) => {
     let value = document.getElementById(chId).checked;
     e.stopPropagation();
     if(value != false)
         document.getElementById(chId).checked = value;
}}

/>

我希望能够实现这一点的原因是我希望在一段时间内限制用户取消选中该复选框。这就是为什么我希望完全手动控制复选框的选中状态。

Answer 1

您的e.preventDefault()冻结了复选框。你需要删除它。

它是value，而不是!value。

<input
id={chId}
type="checkbox"
onClick={(e) => {
     let value = document.getElementById(chId).checked;

     e.stopPropagation();

     if (restrictUser) {
       e.preventDefault();
     }

     document.getElementById(chId).checked = value;
}}

/>

Answer 2

<input
      id={chId}
      type="checkbox"
      checked={(e) => !e.target.value}
    />

如果您可以解释要用于检查框的逻辑，则可能更容易为您提供帮助。无论如何，您应该能够替换checked属性中的逻辑并使其工作，就像您尝试在onClick属性中一样。

Answer 3

您可以按状态控制它 contructor（道具）{ 超（道具） this.state = {checked：flase} } 。

<input
  id={chId}
  type="checkbox"
  checked={this.state.checked}
  onClick={(e) => {
    this.setState({checked: !this.state.checked})
  }}
/>

手动控制复选框值（反应）

3 个答案: