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

我遵循了关于useState钩子的ReactJS文档，但是我无法让它与单选按钮一起工作。它根本不选择任何单选按钮。 顺便说一下，我正在为组件使用react语义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>
  );
}

import React，{useState}来自“React”；
const ListCreateNew=（）=>{
const[gender，setGender]=useState（'Male'）；
返回(
性别
setGender（'Male'）}/>
setGender（'Female'）}/>
);
}

编辑：

---

我向大家道歉。我错过了onClick属性上的匿名函数。

您应该使用annonymous函数来更新状态

<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')} />

---

您好，我添加了一个关于匿名函数的编辑。实际上，我的代码中已经有了，但它仍然不起作用。您在这里设置错误

checked={（）=>gender==='Female'}

它应该是``checked={gender=='Female'}。您的annonymous函数仅在

onClick

jandler上。您好，抱歉，输入错误太多了。再次更新。@alvirbismonte，检查更新的答案，您的收音机使用的元素类型错误。您的代码正常工作

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