反应错误：从受控组件到不受控组件

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>
        );
    }
}

当值改变时，这个组件会返回一个错误。

警告：组件正在更改类型不受控制的输入 要控制的复选框。输入元素不应从 不受控制到受控制（反之亦然）。决定使用 受控或不受控的输入元件的寿命 组件。

但如果我替换：

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>
        );
    }
}

它不会返回任何错误。为什么？

Answer 1

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

这会导致一个不受控制的复选框。

然后，在随后的传递中，input.value 或 props.value 发生了变化，您将 checked 设置为实际值，这意味着它现在是受控输入并且 react 会发出警告。

在初始情况下，即使 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 的存在来预测它。