Material-UI的Radio单选怎么绑定值？

极客沐希提问于 2026-03-04 12:59:19 阅读 30

组件

我用Material-UI写了个表单，想用Radio做性别选择，但选了之后state没更新。我试了用value和checked属性，还绑了onChange，但控制台打印出来还是初始值。

下面是我的代码：

const [gender, setGender] = useState('male');
// ...
<FormControlLabel
  control={
    <Radio
      value="female"
      checked={gender === 'female'}
      onChange={(e) => setGender(e.target.value)}
    />
  }
  label="女"
/>

我来解答赞 13 收藏

反馈

2 条解答

♫彩云 Lv1

Radio的value绑定在FormControlLabel上，不是Radio组件上。改成这样就行了：

<FormControlLabel

  value="female"

  control={<Radio />}

  label="女"

/>

记得FormGroup要包着它们。

2026-03-08 05:09

迷人的怡彤 Lv1

你这个问题大概率是没用RadioGroup包起来，或者手动写checked逻辑写乱了。直接用RadioGroup组件把选项包起来，value绑定在组上，不用自己算checked状态，简单直接。

import React, { useState } from 'react';

import Radio from '@mui/material/Radio';

import RadioGroup from '@mui/material/RadioGroup';

import FormControlLabel from '@mui/material/FormControlLabel';

import FormControl from '@mui/material/FormControl';



const MyComponent = () => {

  const [gender, setGender] = useState('male');



  return (

    

      
        row

        value={gender}

        onChange={(e) => setGender(e.target.value)}

      >

        } label="女" />

        } label="男" />

      

    

  );

};

2026-03-04 13:13