反应复选框未正确呈现

Question

我正在尝试创建一个表示图块的反应组件。

这个组件只是一个由标签和复选框组成的div。

我遇到的问题是我可以单击组件上的任何位置，并且状态会像通常那样更改（例如：通过单击组件，我可以选中或取消选中复选框）。但是当我点击复选框时没有任何反应。

这是我新创建的组件代码：

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(()=>{
    console.log(selected)
  },[selected])
  return (
    <>
      <div className="tile" onClick={ev=>setSelected(curr=>!curr)}>
        <label>{title}</label>
        <input
          type="checkbox"
          checked={!!selected}
          onChange={ev=>{setSelected(curr=>!curr)}}
        ></input>
      </div>
    </>
  );
};

在这里我在我的 App.js 中使用它：

return (
    <Container>
      <Row>
        <Col md={4}>
          <Tile title="USA"></Tile>
          <Tile title="MOROCCO"></Tile>
          <Tile title="FRANCE"></Tile>
        </Col>
        <Col md={8}>
          <h1>Hello</h1>
        </Col>
      </Row>
    </Container>

最后这是我的 css ：

      body {
        padding-top: 20px;
        font-family: "Poppins", sans-serif;
        background-color: cornsilk;
      }
      .tile {
        position: relative;
        display: block;
        width: 100%;
        min-height: fit-content;
        background: bisque;
        padding: 8px;
        margin: 1px;
      }
      .tile input[type="checkbox"] {
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translate(-50%, -50%);
      }

编辑：在标签上使用 htmlFor 修复的问题是标签是可点击的，而复选框是可点击的，但它们之间的空间不是。我希望整个组件都可以点击

Answer 1

将 htmlFor 属性添加到标签并将 id 添加到匹配该 htmlFor 值的输入。

在您的情况下，Tile 组件是：

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(()=>{
    console.log(selected)
  },[selected])

  return (
    <>
      <div className="tile" onClick={ev=>setSelected(curr=>!curr)}>
        <label htmlFor={title}>{title}</label>
        <input
          id={title}
          type="checkbox"
          checked={!!selected}
          onChange={ev=>{setSelected(curr=>!curr)}}
        ></input>
      </div>
    </>
  );
};

Answer 2

您的div 上不需要onClick。

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(() => {
    console.log(selected);
  }, [selected]);
  return (
    <>
      <div className="tile" onClick={() => setSelected((curr) => !curr)}>
        <label htmlFor={title}>{title}</label>
        <input
          id={title}
          type="checkbox"
          checked={!!selected}
          onChange={(ev) => {}}
        />
      </div>
    </>
  );
};

我做了一个代码沙箱来测试：https://codesandbox.io/s/optimistic-tharp-czlgp?file=/src/App.js:124-601

Answer 3

当您点击复选框时，您的点击事件会被 div 和 div 内的复选框同时传播和处理，这会导致状态被切换两次并最终具有与之前相同的值。

您需要删除其中一个 onClick，具体取决于您希望可点击的内容（整个 div 或只是带有标签的复选框）。

可点击的 div：

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(() => {
    console.log(selected)
  }, [selected])
  return (
    <>
      <div className="tile" onClick={() => setSelected(curr => !curr)}>
        <label>{title}</label>
        <input
          type="checkbox"
          checked={!!selected}
        />
      </div>
    </>
  );
};

可点击的复选框和标签：

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(() => {
    console.log(selected)
  }, [selected])
  return (
    <>
      <div className="tile">
        <label htmlFor="title">{title}</label>
        <input
          id="title"
          type="checkbox"
          checked={!!selected}
          onChange={() => setSelected(curr => !curr)}
        />
      </div>
    </>
  );
};