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

Question

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

单选按钮应选择分配给该州的性别。我试过 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 属性上的匿名函数。

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>

Answer 2

const [radio,setRadio] = useState('false')

<Form>

<Form.Check inline label="Response A" type="radio" id="radioA" value="radioA" checked={radio === "radioA"} onChange={(e)=>{setRadio(e.target.value)}}/>

<Form.Check inline label="Response B" type="radio" id="radioB" value="radioB" checked={radio === "radioB"} onChange={(e)=>{setRadio(e.target.value)}}/>
                                
<Form.Check inline label="Response C" type="radio" id="radioC" value="radioC" checked={radio === "radioC"} onChange={(e)=>{setRadio(e.target.value)}}/>
                                
<Form.Check inline label="Response D" type="radio" id="radioD" value="radioD" checked={radio === "radioD"} onChange={(e)=>{setRadio(e.target.value)}}/>
                            
</Form>