Reactjs 选中复选框时，反应JS阻止onClick触发

我有一张带有复选框的

卡

组件。当用户单击一张卡时，另一个

Suggest

组件打开。但是，当用户单击复选框时，

onClick

功能也会运行，仍然会打开

建议

组件。如果没有建议，则返回，在这种情况下，复选框可以正常工作。我尝试使用了

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>
  );
};

事件对象由目标值和状态组成。您可以从事件对象

event.target.checked

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

事件对象由目标值和状态组成。您可以从事件对象

event.target.checked

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

---

您可以检查目标的DOM并比较它是否符合您的要求。签出以下沙箱

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

---

注意：这可能不是最好的方法（注意其他人的解决方案）。我选择了@Ganesh Rathinavel的方法来实现它。如果成功的话，给他积分。

你可以检查目标的DOM并比较它是否是你想要的。签出以下沙箱

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

---

注意：这可能不是最好的方法（注意其他人的解决方案）。我选择了@Ganesh Rathinavel的方法来实现它。如果成功的话，这要归功于他。

我最终通过将onChange改为onClick并运行stopPropagation解决了这个问题： onClick={（事件）=> onUpdateCB（！isChecked，props.logiuser.id，props.id，setisChecked，event.stopPropagation（））

---

}

我最终通过将onChange更改为onClick并运行stopPropagation解决了这个问题： onClick={（事件）=> onUpdateCB（！isChecked，props.logiuser.id，props.id，setisChecked，event.stopPropagation（））

---

}

我的解决方法是停止处理输入中的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>

onUpdateCB（e，！isChecked，props.logiuser.id，props.id，setisChecked）
}
>
{props.name}
{props.company}

{props.phone}

{props.email}

{props.city}

我的网络

我的解决方法是停止处理输入中的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>

onUpdateCB（e，！isChecked，props.logiuser.id，props.id，setisChecked）
}
>
{props.name}
{props.company}

{props.phone}

{props.email}

{props.city}

我的网络

查看是否可以使用

event.target！==event.currentTarget

检查onClick函数ganesh Thx。你能告诉我怎么加吗？顺便说一句，我在onClick中添加了stopPropagation，就像在onChange中一样，我可以选中这些框，但是当我单击卡片时，什么也没有发生……看看您是否可以使用

event.target！==event.currentTarget

检查onClick函数ganesh Thx。你能告诉我怎么加吗？顺便说一句，我在onClick中添加了stopPropagation，就像在onChange中一样，我可以选中这些框，但是当我单击卡片时，什么也没有发生……我应该把它放在哪里？在事件之后。stopPropagation（）如果用户选中了该复选框，它将返回true，否则返回false。如果（e.target.cheked）{return；//函数return if checkbox}我把它放在哪里？在event.stopPropagation（）之后，如果用户选中该复选框，它将返回true，否则返回false。if（e.target.cheked）{return；//函数return if checkbox}我无法使用这个函数。当我选中该复选框时，它仍然会打开另一个组件，并且“不选中”不会出现。handleClick=（id，event）=>{let checkboxDOM=document.getElementsByClassName（'largeCheckbox'）；if（event.target！==checkboxDOM[0]）{//ClickI的代码最终通过将onChange更改为onClick并运行stopPropagation（）来解决。onClick={（event）=>onUpdateCB（！isChecked，props.logiuser.id，props.id，setisChecked，event.stopPropagation（））}很高兴你找到了答案，但我无法使用它。当我选中该框时，它仍会打开另一个组件，并且不会出现复选框。handleClick=（id，event）=>{let checkboxDOM=document.getElementsByClassName（'largeCheckbox'）；如果（event.target！==checkboxDOM[0]）{//ClickI的代码最终通过将onChange更改为onClick并运行stopPropagation（）来解决。onClick={（event）=>onUpdateCB（！isChecked，props.logiuser.id，props.id，setisChecked，event.stopPropagation（））很高兴您找到了答案