javascript - 单选按钮需要点击两次才能反射(reflect)变化

Question

1.每当我单击单选按钮时，它都会调用 handleOptionChange 回调，但不会反射(reflect) html 中的更改。2.但是当我在单选按钮上点击两次时它反射(reflect)了变化

My question is why i need to click twice on radio buttons? Is am i doing anything wrong?

class CompleteProfile extends Component{

    constructor(props){
        super(props);
        this.state = {
            teacher_role:'subject'
        };
        this.handleOptionChange = this.handleOptionChange.bind(this);
    }

    handleOptionChange(event){
        event.preventDefault();
        let { name, value } = event.target;
        this.setState( { [name]:value } );
    }

    render(){
        let { teacher_role } = this.state;
        console.log('teacher:',teacher_role);
        return(
            <Wrapper className="complete-profile">
                <CustomContainer>
                    <Title>complete profile</Title>
                    <ProfileCard>
                        <Form noValidate>

                            <FormGroup>
                                <label>I want to enroll as:</label>

                                <label htmlFor="test">
                                    <input id="test" type="radio" name="teacher_role" value="subject" checked={ teacher_role === 'subject' } onChange={ this.handleOptionChange } />
                                    subject teacher
                                </label>

                                <label htmlFor="test1">
                                    <input id="test1" type="radio" name="teacher_role" value="chapter" checked={ teacher_role === 'chapter' } onChange={ this.handleOptionChange } />
                                    class teacher
                                </label>

                                <label htmlFor="test2">
                                    <input id="test2" type="radio" name="teacher_role" value="both" checked={ teacher_role === 'both' } onChange={ this.handleOptionChange } />
                                    both
                                </label>

                            </FormGroup>
                        </Form>
                    </ProfileCard>
                </CustomContainer>
            </Wrapper>
        )
    }

    componentWillUpdate(nextProps){

    }

    componentDidUpdate(prevProps){

    }

}

Answer 1

从 handleOptionChange 方法中删除 event.preventDefault();