反應錯誤：從受控制到不受控制的組件

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 （或falsy），這樣你就回落到value道具，這是undefined ，你最終設置checked到undefined您輸入。

這將導致不受控制的復選框。

然后，在隨后的遍歷中， input.value或props.value都已更改，並且您將checked設置為實際值，這意味着它現在是受控輸入，並且react會發出警告。

在最初的情況下，即使input.value顯式為false或0或為空字符串，您也將獲得value prop：

// 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來預測它的。