Правильный способ использования крючка useState на переключателях - PullRequest
Новая
       0

Правильный способ использования крючка useState на переключателях

0 голосов
/ 25 сентября 2019

Я следовал документации ReactJS относительно ловушки useState, но не могу заставить ее работать с переключателями.Он не выбирает никакой радио-кнопки вообще.Кстати, я использую реагирующий-семантический интерфейс для компонента.

Переключатели должны выбрать пол, назначенный для государства.Я пытался console.log переменная gender, и она изменяется, но не влияет на пользовательский интерфейс.

Вот мой код для справки. 

import React, { useState } from 'react';

const ListCreateNew = () => {
  const [gender, setGender] = useState('Male');
  return (
      <Form.Group inline>
        <label>Gender</label>
        <Form.Field control={Radio} label="Male" checked={gender === 'Male'} value="Male" onClick={() => setGender('Male')} />
        <Form.Field control={Radio} label="Female" checked={gender === 'Female'} value="Female" onClick={() => setGender('Female')} />
      </Form.Group>
  );
}

РЕДАКТИРОВАТЬ: я прошу прощениякаждый.Я пропустил анонимную функцию в атрибуте onClick.

1 Ответ

1 голос
/ 25 сентября 2019

Вы должны использовать анонимную функцию для обновления состояния, 

<Form.Field control={Radio} label="Male" checked={gender === 'Male'} value="Male" onClick={() => setGender('Male')} />
<Form.Field control={Radio} label="Female" checked={gender === 'Female'} value="Female" onClick={() => setGender('Female')} />

Обновление

Для переключателя у вас есть Form.Radio 

<Form.Group inline>
    <label>Gender</label>
    <Form.Radio label="Male" checked={gender === 'Male'} value="Male" onClick={() => setGender('Male')} />
    <Form.Radio label="Female" checked={gender === 'Female'} value="Female" onClick={() => setGender('Female')} />
</Form.Group>
...