选中复选框时React JS防止触发onClick答案

【问题标题】：React JS Prevent onClick from Firing when Checkbox is checked选中复选框时React JS防止触发onClick
【发布时间】：2020-03-22 14:50:15
【问题描述】：

我有一个带有复选框的Card 组件。当用户点击一张卡片时，另一个Suggest 组件会打开。然而，当用户点击复选框时，onClick 函数也会运行，仍然会打开Suggestions 组件。如果没有建议，则返回，在这种情况下，复选框可以正常工作。我尝试使用preventDefault 和stopPropagation，我在下面的代码中包含了stopPropagation。非常感谢任何帮助。

import React, { useState } from "react";

const onUpdateCB = (e,ischecked, loginuser, userid, setisChecked,handleCheck) => {
 e.stopPropagation();
  console.log(ischecked, loginuser, userid);

  fetch('http://localhost:3000/cb', {
      method: 'post',
      headers: {'Content-Type':'application/json'},
      body:JSON.stringify({
      loginuser,
      userid,
      ischecked: ischecked
    })
  }).then(setisChecked(ischecked));
  return

};

const Card = props => {
  const [isChecked, setisChecked] = useState(props.ischecked);
  return (
    <div
      className="pointer bg-light-green dib br3 pa3 ma2 shadow-5"
      onClick={() => props.handleClick(props.id)}

    >
      <div>
        <h3>{props.name}</h3>
        <p>{props.company}</p>
        <p>{props.phone}</p>
        <p>{props.email}</p>
        <p>{props.city}</p>
      </div>
      <div>
        My Network
        <input
          className="largeCheckbox"
          type="checkbox"
          checked={isChecked}
          onChange={(e) =>
            onUpdateCB(e,!isChecked, props.loginuser.id, props.id, setisChecked)
          }
        />
      </div>
    </div>
  );
};

手柄点击功能

handleClick(id) {
    const updatedSuggest = suggest.map(sugg => {
      if (sugg.id === id) {
        this.setState({
          suggest: suggest.filter(suggest => suggest.id === id),
          route: "suggestions"
        });
        this.setState({ routed: true });
        this.setState({
          networkfilter: this.state.network.filter(netw => netw.id === id),
          route: "suggestions"
        });
        this.setState({ routed: true });
      }
      return;
    });
  }

【问题讨论】：

看看能不能用event.target !== event.currentTarget签入onClick函数
Ganesh-Thx。你能发布如何添加它吗？顺便说一句，我在 onClick 中添加了 stopPropagation，就像我在 onChange 中一样，我能够选中这些框，但是当我点击卡片时没有任何反应......

标签： reactjs checkbox preventdefault stoppropagation

【解决方案1】：

我终于通过将 onChange 更改为 onClick 并运行 stopPropagation 解决了这个问题： onClick={(事件) => onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,event.stopPropagation()) }

【讨论】：

【解决方案2】：

事件对象由目标值和状态组成。您可以从事件对象event.target.checked 中验证是否选中

不要向函数传递超过 4 个参数。如果您需要更多，则创建对象并传递

【讨论】：

我把这个放在哪里？
在 event.stopPropagation() 之后，如果用户选中该复选框，它将返回 true，否则返回 false。如果（e.target.cheked）{返回； //如果复选框被选中，函数返回}

【解决方案3】：

您可以检查目标的 DOM 并比较它是否是您要查找的内容。检查以下沙箱。

let checkboxDOM = document.getElementsByClassName('largeCheckbox');
if(e.target !== checkboxDOM[0])
{
  //TODO Your function here for Card click
}

https://codesandbox.io/s/intelligent-easley-mmn2o

注意：也许不是最好的方法（寻找其他解决方案）。我选择了@Ganesh Rathinavel 的方法来让它发挥作用。如果可行，请归功于他。

【讨论】：

我无法使用它。当我选中该框时，它仍然会打开其他组件并且不会出现未选中。 handleClick=(id,event) => { let checkboxDOM = document.getElementsByClassName('largeCheckbox'); if(event.target !== checkboxDOM[0]) { //点击代码
我终于通过将 onChange 更改为 onClick 并运行 stopPropagation() 来解决。 onClick={(event) => onUpdateCB(!isChecked, props.loginuser.id, props.id, setisChecked,event.stopPropagation()) }
很高兴您找到了答案

【解决方案4】：

我的 WorkAround 停止处理输入复选框中的 onChange，只是通过处理外部 div 为我工作......

<div
      className="pointer bg-light-green dib br3 pa3 ma2 shadow-5"
          onClick={(e) =>
            onUpdateCB(e,!isChecked, props.loginuser.id, props.id, setisChecked)
          }
    >
      <div>
        <h3>{props.name}</h3>
        <p>{props.company}</p>
        <p>{props.phone}</p>
        <p>{props.email}</p>
        <p>{props.city}</p>
      </div>
      <div>
        My Network
        <input
          className="largeCheckbox"
          type="checkbox"
          checked={isChecked}
        />
      </div>
    </div>

【讨论】：