如何使用 State Hook 在 React 中编写语义 UI 单选组？

Question

我正在尝试在 React 中使用语义 UI 编写单选按钮组。我可以在 Radio page of the Semantic UI to work. It is written by extending Component. I want to write the same thing defining React components as functions instead of classes and using the state hook 上获取 Radio Group 示例。我无法让它工作。

我将示例修改为如下所示。

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>
    )
};

当我点击单选按钮时，UI 没有任何反应。

运行在调试器中我看到 handleChange 被调用并且似乎在做正确的事情，但看起来 undefined 被传递给了 checked 函数。

我做错了什么？

Answer 1

我在 Codesandbox 上尝试了 Semantic UI，发现 event.target.value - 未定义，因为 target - 是 label 元素，而不是 input，所以你需要改变

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

到

const handleChange = (event, {value}) => setValue({ value });

喜欢语义文档 UI says

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

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>
    )
};

如何使用 State Hook 在 React 中编写语义 UI 单选组？

How do I write a Semantic UI radio group in React using the State Hook?

javascript

radio-group

reactjs