Javascript 如何使用状态钩子在React中编写语义UI无线电组？

我试图在React中使用语义UI编写一个单选按钮组。我可以让语义用户界面上的无线电组示例正常工作。它是通过扩展

组件

编写的。我想写同样的东西，将React组件定义为函数，而不是类，并使用。我不能让它工作

我修改了示例，使其看起来像这样

import React, {useState} from 'react'
import {Form, Radio} from 'semantic-ui-react'


export const RadioExampleRadioGroup = () => {
    const [value, setValue] = useState({});
    const handleChange = event => setValue({value: event.target.value});

    return (
        <Form>
            <Form.Field>
                Selected value: <b>{value.value}</b>
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Choose this'
                    name='radioGroup'
                    value='this'
                    checked={value.value === 'this'}
                    onChange={handleChange}
                />
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Or that'
                    name='radioGroup'
                    value='that'
                    checked={value.value === 'that'}
                    onChange={handleChange}
                />
            </Form.Field>
        </Form>
    )
};

import React，{useState}来自“React”
从“语义ui反应”导入{Form，Radio}
导出常量RadioExampleRadioGroup=（）=>{
const[value，setValue]=useState（{}）；
const handleChange=event=>setValue（{value:event.target.value}）；
返回(
所选值：{value.value}
)
};

当我单击单选按钮时，UI中不会发生任何事情

在调试器中运行时，我看到调用了

handleChange

，似乎做了正确的事情，但似乎

undefined

传递给了

checked

函数

---

我在这里做错了什么？

我在Codesandbox上尝试了语义UI，发现

事件.target.value

-未定义，因为

目标

-是

标签

元素，而不是

输入

，所以需要更改

const handleChange = event => setValue({value: event.target.value});

到

比如语义用户界面的文档

还有一个建议。如果只需要存储一个单选按钮值，则不需要将其存储在对象中，因此可以将代码重写为：

export const RadioExampleRadioGroup = () => {
    const [value, setValue] = useState(null);
    const handleChange = (event, {value}) => setValue(value);

    return (
        <Form>
            <Form.Field>
                Selected value: <b>{value}</b>
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Choose this'
                    name='radioGroup'
                    value='this'
                    checked={value === 'this'}
                    onChange={handleChange}
                />
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Or that'
                    name='radioGroup'
                    value='that'
                    checked={value === 'that'}
                    onChange={handleChange}
                />
            </Form.Field>
        </Form>
    )
};

导出常量RadioExampleRadioGroup=（）=>{
const[value，setValue]=useState（null）；
常量handleChange=（事件，{value}）=>setValue（值）；
返回(
所选值：{value}
)
};

点击一下就解决了问题。

export const RadioExampleRadioGroup = () => {
    const [value, setValue] = useState(null);
    const handleChange = (event, {value}) => setValue(value);

    return (
        <Form>
            <Form.Field>
                Selected value: <b>{value}</b>
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Choose this'
                    name='radioGroup'
                    value='this'
                    checked={value === 'this'}
                    onChange={handleChange}
                />
            </Form.Field>
            <Form.Field>
                <Radio
                    label='Or that'
                    name='radioGroup'
                    value='that'
                    checked={value === 'that'}
                    onChange={handleChange}
                />
            </Form.Field>
        </Form>
    )
};