在 React.js 中重置 RadioGroup 值

Question

I am attempting to build a quiz app using React. I am using Material-UI for radio button input for multi-choice questions, and am having issues clearing the selected buttons when a new questions loads. For instance, on question 1 if the user selects answer A, when they move on the the next question A is selected by default.

I have tried resetting this.state.value to undefined and null after a response is submitted, tried making separate state for each question to use as the starting value, etc. Nothing works. From examining the React components via developer tools I can see the value within the RadioGroup being reset to null or undefined, but Hook shows the prior answer is maintained from the question before. I can't figure out how to reset.

Here are my handlers/state:

  this.state = {
      q_number: 1,
      value: undefined
    };

    this.handleNext = this.handleNext.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleNext = () => {
    var new_index = this.state.q_number; 
    this.setState({ q_number: new_index + 1, value: undefined});
  }

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

Example form with two questions:

render() {
   let content; 
   if (this.state.q_number === 1) {
        content = (
            <div>
                <FormControl className="answers-form" component="fieldset">
                    <RadioGroup name="questions1" value={this.state.value} onChange={this.handleChange}>
                        <FormControlLabel value="a" control={<Radio color="default"/>} label="Answer 1" />
                        <FormControlLabel value="b" control={<Radio color="default"/>} label="Answer 2" />

                    </RadioGroup>
                </FormControl>
            </div>
        ); 
    } else if(this.state.q_number === 2) {
        content = (
            <div>

                <FormControl className="answers-form" component="fieldset">
                    <RadioGroup name="questions2" value={this.state.value} onChange={this.handleChange}>
                        <FormControlLabel value="a" control={<Radio color="default"/>} label="Answer 1" />
                        <FormControlLabel value="b" control={<Radio color="default"/>} label="Answer 2" />
                    </RadioGroup>
                </FormControl>
            </div>
        );
    }

 return (
        <div className="body questions">
            <div>
                {content}
                <Button className={btnClass} color="primary" onClick = {() =>this.handleNext()}>
                    Next
                </Button>
            </div>
        </div>
    );

Answer 1

Im not seeing increment_q function, but what you want to achieve is the basic state case.

Do something like this:

<Button className={btnClass} color="primary" onClick={this.incrementNextValue} />

incrementNextValue = () => {
  this.setState({q_number: this.state.q_number + 1});
}

The same works for the handleChange in the radio buttons. Also, bind is not necessary if you are using arrow functions.

That will re-render your component, your state will be different and the correct next button should be displayed.