Question

我有一个带有复选框的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函数

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

Answer 1

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

Answer 2

事件对象包含目标值和状态。您可以通过事件对象event.target.checked
进行检查
不要将超过4个参数传递给一个函数。如果需要更多，请创建对象并传递

Answer 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的方法来使其工作。如果可行，可以归功于他。

Answer 4

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

选中复选框后，React JS会阻止onClick触发

4 个答案: