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

Question

I have a Grid component as a row among other grid rows within the grid container. The grid row contains a description and a checkbox. How do i make it so I can click anywhere on the row to be able to check/uncheck the checkbox?

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

Answer 1

I am not sure why you want to use Grid But If you want to activate checkbox with by clicking on any text then you can use FormControlLabel

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

Checkbox with FormControlLabel

Answer 2

You can update the Checkbox component from uncontrolled to controlled.

First, create a state and call checkboxState as Boolean .
Now, inside your 'handleChange` function toggle the state.

Second, add checked={checkboxState} as a prop to the Checkbox component.
eg

<Checkbox checked={checkboxState} />