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>

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

1 个答案: