Question

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

我的问题是为什么我需要在单选按钮上单击两次？我做错了吗？

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

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

Answer 2

对于其他遇到此问题的人，请确保您没有为多组单选按钮使用相同的name属性。

在通过数组映射并为每个数组项呈现一组单选按钮时，可能会发生这种情况。通过将当前数组项的索引添加到单选按钮名称中，可以避免此问题。

请注意，在这种情况下，preventDefault方法中不需要handleOptionChange。

Answer 3

我遇到了类似的问题，并通过将检查状态添加到组件的键来解决此问题。像这样：

<Radio key={ radioKey + isChecked }/>

每次选中状态改变时组件都会重新渲染

Answer 4

例如，如果您像我一样，需要使用event.preventDefault()，以防止输入内容提交。您可以改用event.stopPropagation()。

请参阅this issue comment以获得更多背景信息

Answer 5

如果您的DOM中的input和label元素重叠，则会发生此问题。对我有用的是只是仔细检查DOM并消除这两者之间的重叠。

Answer 6

如果您使用条件检查表单的先前状态和当前状态，并且先前状态未更改，也会发生这种情况。我就是这种情况。

检查您的更新程序功能（针对来这里寻求解决方案的人员）。

请注意，您提供了对setState的第二次回调，或者在这种情况下使用钩子时可以使用useEffect。
您在两个不同的DOM元素上使用相同的键或ID。
使用e.preventDefault()。

Answer 7

目前，我遇到了类似的问题。使用 useEffect 导致我出现以下问题：当我单击提交而不提供值时，会出现错误消息。然后，当我选择任何单选按钮时，它会删除错误消息，但我必须再次单击以设置该值。当我 console.log() 它时，我可以看到该值在第一次点击时被选中，但在第二次点击时显示..

 useEffect(() => {
   setError(props.error ? true : false);
   setValue(props.value ? props.value : '');
   setErrorMessage(props.errorMessage ? props.errorMessage : '');
 }, [props.value1, props.value2, props.value, props.error, props.errorMessage]);

当我在 useEffect() 的末尾传递一个空数组时，在没有选定值的情况下提交不会触发错误消息，但选择一个值只需单击一下即可.. 有什么建议吗？

单选按钮需要单击两次以反映更改

7 个答案: