如何在反應js中獲取單選按鈕和日歷控件值

Question

我在組件中有單選按鈕和日歷控件，我正在嘗試獲取它們的選定值。 當我 select 任何單選按鈕時，我沒有在控制台中獲得它的值。 對於日歷控制，控制台中沒有任何錯誤。 我有以下代碼。

    statusHandler = (event) => {
        console.log("radio event",event.target);
        var key = event.target.name;
        console.log("radio key :", key);// can see key here
        var val = event.target.value;//not getting a value here.
        console.log("radio value :", val);
    }

handleChange = date => {
        var key = event.target.name;
        console.log("calender  key :", key);
        var val = event.target.value;//not getting a value here.
        console.log("calender value :", val);
    }

//render menthod code 
<DatePicker name={model.date} value={this.state.selectedDate} selected={this.state.startDate} onChange={this.handleChange}/>
<div className="some-class">
<input type="radio" className="radio" name={model.CODE} value={this.state.isLoan} onChange={this.statusHandler} />
<label htmlFor={model.CODE}>Yes</label>
<input type="radio" className="radio" name={model.CODE} onChange={this.statusHandler}  value={this.state.isLoan}/>
<label htmlFor={model.CODE}>No</label>
</div>

Answer 1

請在此處檢查以下代碼，我使用 Radio 並在警報中顯示選定的值。 在運行此代碼之前，運行類似yarn add @material-ui/core的命令

這是代碼：

import React, {useEffect, useState} from 'react';
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";

function RadioExample(props) {
    const [value, setValue] = React.useState('female');

    const handleChange = (event) => {
        setValue(event.target.value);
        alert(event.target.value);
    };
    return (
        <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"/>
            </RadioGroup>
        </FormControl>
    );
}
export default RadioExample;