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>

这是我用来生成单选按钮的地图功能：

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

Answer 1

创建RadioButtonGroup时，必须指定名称属性（请参阅material-ui documentation）。

使用地图功能时，您应该为每个返回的元素添加键属性。

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

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

Material-UI中的单选按钮组

1 个答案: