小编典典

反应组件正在更改要控制类型的不受控制的输入复选框

reactjs

react给我一个警告:“组件正在更改要控制类型的非受控输入复选框。输入元素不应从非受控切换为受控(反之亦然)。”

但是我的复选框是通过state属性更改的。我缺少明显的东西吗?

    import React from 'react';

// Components
import Checkbox from './checkbox';
import HelpBubble from './helpBubble';

export default class CheckboxField extends React.Component {


    constructor(props) {
        super(props);
        this.state = {value: props.value};
        this.handleChange = this.handleChange.bind(this);
    }

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

    componentWillReceiveProps(nextProps) {
        if (nextProps.value !== this.props.value) {
            this.setState({value: nextProps.value});
        }
    }

    render() {
        const {label, meta = {}, help, disabled, required, onChange} = this.props;

        return (
            <label className="checkbox-wrap form-field">
                <Checkbox
                    disabled={disabled}
                    type="checkbox"
                    onChange={(event) => {
                        onChange(event, !this.state.value);
                    }}
                    checked={this.state.value}/>
                {label && (
                    <div className="checkbox-label">
                        {label}
                        {required && <div className="form-field__required"/>}
                    </div>
                )}
                {help && <HelpBubble help={help}/>}
                {meta.error && meta.touched && (
                    <div className="input-error">{meta.error}</div>
                )}
            </label>
        );
    }}

父组件:handleChangeParams(key,value)} />句柄更改参数更改模型中的值并调用服务器。根据服务器结果,该值可以更改。

提前致谢。


阅读 190

收藏
2020-07-22

共1个答案

小编典典

如果你的状态与初始化props.valuenull反应会考虑你的Checkbox组件是不受控制的。

尝试设置您的初始状态,以使值永远不会null

this.state = { value: props.value || "" };
2020-07-22