javascript - 如何从父组件触发 onClick 事件以触发其子复选框值？

Question

我有一个在上下文中处理状态的表单。在表单中，我有一个复选框组件，我试图在上下文中处理它的状态。因此，当我提交表单时，无论是否选中，复选框都会返回一个布尔值。我在触发复选框的事件处理程序时遇到问题。我在表单中有许多文本字段，它们的行为符合预期，一旦提交表单，它们的值就可以在 Db 中看到。

在复选框组件中，实际输入被隐藏以进行样式设置。所以用户将点击标签（其样式看起来像一个复选框）或辅助标签（充当标签）

我希望这样当用户点击任一标签时，复选框就会被触发。我在复选框输入上有 onClick，但看到它的显示被隐藏，用户无法触发事件。如果我将 onClick 放在任何一个标签或父元素上，我的 onChange 函数 e.target 将指向错误的位置。

有没有办法将输入作为 e.target 传递？如果 onClick 事件在外部 div 上？

onChange（在 RecordForm.js 中）

  const onChange = (e) => {
      setRecord({ ...record, [e.target.name]: e.target.value });
  };

复选框.js

const CheckBox2 = ({ value, label, name, onChange }) => {
  return (
    <CheckBoxContainer onClick={onChange}>
      <LabelContainer>
        <CheckboxInput
          type='checkbox'
          value={value}
          name={name}
        />
        <CheckBoxLabel>
          <Tick className='Tick' />
        </CheckBoxLabel>
      </LabelContainer>
      <VisibleLabel>{label}</VisibleLabel>
    </CheckBoxContainer>
  );
};

export default CheckBox2;

标签： javascriptreactjseventsonclick