Javascript 如何使网格组件可单击以选中/取消选中复选框？

在网格容器中的其他网格行中，我有一个网格组件作为一行。网格行包含说明和复选框。如何使我可以单击行上的任意位置以选中/取消选中复选框

<label>
              <Grid container xs={12} direction= "row" onClick={handleChange}>
                <Grid item xs={6} md={8}>
                    <h4>Reverse The Online Gambling Ban</h4>
                    <p>The MPA comes with three different sizes of foam and silicone tips and carrying pouch.</p>
                </Grid>
                <Grid item xs={6} md={4} style={{textAlign: 'center', }}>
                <Checkbox 
                style={{marginTop: "10%"}} 
                type="checkbox" 
                name="newsletter-1" 
                disabled={formData.optOut == true} 
                onChange={handleChange}/>
                </Grid>
              </Grid>
 </label>

撤销网上赌博禁令
MPA配有三种不同尺寸的泡沫和硅胶头以及便携袋

我不确定您为什么要使用网格 但如果您想通过单击任何文本激活复选框，则可以使用 FormControlLabel

<FormControlLabel
        control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
        label="Gilad Gray"
      />

---

您可以将复选框组件从非受控更新为受控

首先，创建一个状态并调用

checkboxState

作为

Boolean

。
现在，在“handleChange”函数中切换状态

其次，将

checked={checkboxState}

作为一个道具添加到Checkbox组件中。
例如