Material-UI , 单选按钮 + 地图功能 (React JS)

Question

所以我需要帮助，我想替换旧的单选按钮（经典） 使用 material-ui 的新版本。我做不到。 请提出解决方案。 提前谢谢。 在图片中你会看到一切

class Question extends Component {
  render() {
    var that = this; // Funny way to be able to access this from inside our iterator() function below.
    var iterator = this.props.questionChoices.map(function(choice){
            return (
                <div className="radio">
                <label>
                    <input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
                    {choice}
                </label>
                <RadioButtonGroup >
                    <RadioButton
                        value="ludicrous"
                        label={choice}
                        valueSelected={choice}
                        style={styles.radioButton}
                    />
                </RadioButtonGroup>
                </div>
              );
      });
    return (

            <div className="row">
                <div className="form">
                  <Paper zDepth={1} >
                  <div className="h3">
                    <h3 >{this.props.questionID} - {this.props.questionText}</h3>
                        {iterator}
                        </div>
                        </Paper>
                </div>
            </div>
    );
    }

}

result of the problem image

Answer 1

您也在渲染旧的单选按钮，您还需要在组组件中定义选定的值并只渲染一次组，目前您正在为每个选项渲染它。

var iterator = (
  <RadioGroup value={this.state.value} onChange={this.handleChange}>
  {  this.props.questionChoices.map(choice =>
        <FormControlLabel value={choise} control={<Radio />} label={choise} />
    )
  }
  </RadioGroup>
);

那么你需要创建handleChange函数来更新状态。

class Question extends Component {
  state = {
    value: '',
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };
...

您可以在这里找到一个工作示例：https://material-ui-next.com/demos/selection-controls/