在单选按钮上使用 useState 钩子的正确方法

Question

我遵循了关于 useState 钩子的 ReactJS 文档，但我无法让它与单选按钮一起使用。它根本不选择任何单选按钮。顺便说一下，我正在为组件使用 react-semantic ui。

单选按钮应选择分配给该州的性别。我试过console.log这个gender变量，它发生了变化，但没有反映在 ui 上。

这是我的代码供您参考。

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 属性上的匿名函数。

Answer 1

您应该使用匿名函数来更新状态，

<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>