Как написать радиогруппу Semantic UI в React с помощью State Hook? - PullRequest
Новая
       45

Как написать радиогруппу Semantic UI в React с помощью State Hook?

2 голосов
/ 06 ноября 2019

Я пытаюсь написать группу переключателей, используя Semantic UI в React. Я могу получить пример группы радиостанций на странице Radio семантического интерфейса пользователя для работы. Это написано расширением 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>
    )
};

Ничего не происходит в пользовательском интерфейсе, когда я нажимаю переключатели.

Работая в отладчике, я вижу, что handleChange вызывается и, кажется, делает правильные вещи, но похоже, что undefined передается в функции checked.

Что я делаюздесь не так?

1 Ответ

1 голос
/ 06 ноября 2019

Я попробовал Semantic UI на Codesandbox и обнаружил, что event.target.value - не определено, потому что target - это элемент label, а не input, поэтому вам нужно изменить 

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


const handleChange = (event, {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>
    )
};
...