React error: from controlled to uncontrolled component

Question

编辑：这个问题被一些用户标记为重复。不确定他们在这样做之前是否阅读过。如果有人这样做，请说明这是重复的。

我有一个复选框组件：

class Checkbox extends Component {
    onChange = (e) => {
        if (this.props.input) {
            this.props.input.onChange(e.target.checked);
        } else if (this.props.onChange) {
            this.props.onChange(e.target.checked, this.props.id);
        }
    };

    render() {
        const { input, value, className, label } = this.props;
        let inputValue = (input && input.value) || value;

        return (
            <div className={'Checkbox' + (className ? ' Checkbox--' + className : '')}>
                <input
                    className="Checkbox-input"
                    type="checkbox"
                    onChange={this.onChange}
                    checked={inputValue}
                />
                <span className="Checkbox-helper" />
                <span className="Checkbox-label" htmlFor="">
                    {label}
                </span>
            </div>
        );
    }
}

此组件 return 在值更改时出错。

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

但是如果我替换：

let inputValue = (input && input.value) || value;

和

let inputValue = value;
if (input) {
    inputValue = input.value;
}

像这样：

class Checkbox extends Component {
    onChange = (e) => {
        if (this.props.input) {
            this.props.input.onChange(e.target.checked);
        } else if (this.props.onChange) {
            this.props.onChange(e.target.checked, this.props.id);
        }
    };

    render() {
        const { input, value, className, label } = this.props;

        let inputValue = value;
        if (input) {
            inputValue = input.value;
        }

        return (
            <div className={'Checkbox' + (className ? ' Checkbox--' + className : '')}>
                <input
                    className="Checkbox-input"
                    type="checkbox"
                    onChange={this.onChange}
                    checked={inputValue}
                />
                <span className="Checkbox-helper" />
                <span className="Checkbox-label" htmlFor="">
                    {label}
                </span>
            </div>
        );
    }
}

它 return 没有任何错误。为什么？

Answer 1

一种可能性——这里没有足够的信息可以肯定——是 input.value 存在但是 false（或假的），所以你回到 value prop ，即 undefined，您最终在输入中将 checked 设置为 undefined。

这会导致出现不受控制的复选框。

然后，在随后的传递中，input.value 或 props.value 已更改并且您将 checked 设置为实际值，这意味着它现在是受控输入并且反应发出警告。

在您的初始情况下，即使 input.value 明确为 false 或 0 或空字符串，您也会获得 value 道具：

// if input.value === false here you get
// the fallback value which may be undefined
let inputValue = (input && input.value) || value;

在您修改的案例中……

let inputValue = value;
if (input) {
  inputValue = input.value;
}

…您已经避免了这种情况，因为您是根据 input 本身而不是 input.value.

的存在来预测它的

React error: from controlled to uncontrolled component

React error: from controlled to uncontrolled component

javascript

reactjs

controlled-component