Question

所以我需要帮助的人，我想要更换旧的单选按钮（经典）用一个新的材料-ui。我做不到。请提出解决方案。 thx提前。在图片中你会看到一切

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/

Material-UI，单选按钮+地图功能（React JS）

1 个答案: