javascript - Material-UI 中的单选按钮组

Question

我用 React 和 Bootstrap 构建了这个项目。我想更改为 material-ui，在更改单选按钮之前效果很好。

这是我用的旧版本(效果很好)。

<label>
    <input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
    {choice}
</label>

这里是material-ui版本。

<RadioButtonGroup >
    <RadioButton
        value={that.props.questionID}
        label={choice}
    />
</RadioButtonGroup>

这是我用来生成单选按钮的 map 函数:

var iterator = (
  <RadioButtonGroup selectedValue={that.props.questionID}>
    {that.props.questionChoices.map(choice => <RadioButton value={choice} label={choice} /> )}
  </RadioButtonGroup>
);

Answer 1

创建 RadioButtonGroup 时，必须分配 name 属性(请引用 material-ui documentation )。

此外，当使用 map 函数时，您应该为每个返回的元素添加一个 key 属性。

以下代码段解决了这些问题:

var iterator = ( 
  <RadioButtonGroup 
    name="questionChoices"
    valueSelected={that.props.questionID}
    onChange={that.props.handleChange}
  > 
    {that.props.questionChoices.map(choice => (
       <RadioButton value={choice} label={choice} key={choice}/> 
    )} 
  </RadioButtonGroup> 
)