如果我使用的是 Material Ui，我如何在 React 中获取输入字段的值？

Question

I have few radio inputs which are imported from material Ui react components,

      <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color="primary" />} label={<span dangerouslySetInnerHTML={{ __html: answer}}></span>} />
</div>

Here, I tried to access the value of input through onClick function like below

const checkAnswer = (e: React.MouseEvent<HTMLLabelElement>) => {
 
     answer = e.currentTarget.value; //but throws error as label is not an input element
     
  }

so, How do I get the Value of input tag cause I am unable to implement onClick function to input tag?

Answer 1

You should get the value from RadioGroup

look at this example from Matrial-ui documentation:

 <FormControl component="fieldset"> <FormLabel component="legend">Gender</FormLabel> <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}> <FormControlLabel value="female" control={<Radio />} label="Female" /> <FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="other" control={<Radio />} label="Other" /> <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" /> </RadioGroup> </FormControl>