如何使 Grid 组件可单击以选中/取消选中复选框？答案

【问题标题】：How do I make a Grid component clickable to check/uncheck checkbox?如何使 Grid 组件可单击以选中/取消选中复选框？
【发布时间】：2021-05-29 10:54:22
【问题描述】：

我有一个 Grid 组件作为网格容器内其他网格行中的一行。网格行包含一个描述和一个复选框。我如何做到这一点，以便我可以单击行上的任意位置以选中/取消选中复选框？

<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>

【问题讨论】：

标签： javascript reactjs forms material-ui

【解决方案1】：

我不确定你为什么要使用 Grid 但是，如果您想通过单击任何文本来激活复选框，那么您可以使用表单控件标签

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

Checkbox with FormControlLabel

【讨论】：

【解决方案2】：

您可以将 Checkbox 组件从不受控更新为受控。

首先，创建一个状态并将checkboxState 称为Boolean。
现在，在“handleChange”函数中切换状态。

其次，将checked={checkboxState} 作为道具添加到 Checkbox 组件。
例如

<Checkbox checked={checkboxState} />

【讨论】：