保存选择单选问题的时间

Question

我想保存用户保存他/她的单选按钮类型问题答案的时间。这在HTML中是可能的吗？我能用其他的编码语言或包实现它吗？如果重要的话，我正在用react.js typescript编写。例如，这里有一些问题，我想在每次用户选择他/她的答案时保存：

<label htmlFor="screenhours"> <b> 4. How many hours a day on average do you use a computers? </b> {" "} </label>
<p>
    <input type="radio" name="screenhours" value="1" required onChange={onChange(4)} />{" "}
    Less than an hour &emsp;  <br />
    <input type="radio" name="screenhours" value="2" onChange={onChange(4)} />
    {" "}
    Between 1-3 hours &emsp;  
    <br />
    <input type="radio" name="screenhours" value="3" onChange={onChange(4)} />
    {" "}
    Between 3-5 hours &emsp;
    <br />
    <input type="radio" name="screenhours" value="4" onChange={onChange(4)} />{" "}
    More than 5 hours &emsp;  <br />
</p>

Answer 1

如果您使用的是函数组件，下面是如何获取单选输入元素的值的方法。

export const Sample = () => {
    const [state, setState] = useState({
        screenhours: 0
    })

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, checked, valueAsNumber } = e.target

        // name: must be state object property
        // value: that you set for radio input element
        // valueAsNumber: if you want to get integer value

        setState({ ...state, [name]: value })
    }

    return (
        <div>
            <label htmlFor="screenhours">
                {' '}
                <b> 4. How many hours a day on average do you use a computers? </b>{' '}
            </label>
            <p>
                <input
                    type="radio"
                    name="screenhours"
                    value="1"
                    required
                    onChange={handleInputChange}
                />{' '}
                Less than an hour &emsp; <br />
                <input
                    type="radio"
                    name="screenhours"
                    value="2"
                    onChange={handleInputChange}
                />{' '}
                Between 1-3 hours &emsp; <br />
                <input
                    type="radio"
                    name="screenhours"
                    value="3"
                    onChange={handleInputChange}
                />{' '}
                Between 3-5 hours &emsp; <br />
                <input
                    type="radio"
                    name="screenhours"
                    value="4"
                    onChange={handleInputChange}
                />{' '}
                More than 5 hours &emsp; <br />
            </p>
        </div>
    )
}