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

麦克尼尔（WP McNeill）

我试图在React中使用语义UI编写一个单选按钮组。我可以在语义UI的“广播”页面上获得“广播组”示例。它是通过扩展编写的Component。我想写同样的东西，将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>
    )
};

当我单击单选按钮时，UI中什么都没有发生。

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

我在这里做错了什么？

安德烈（Andriy Golubenko）

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

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

至

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

就像语义UI文档说

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。