0

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

我有一个复选框组件：

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

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

4

1 回答 1

1

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

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

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

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

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

在您修改后的情况下……</p> 

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

......你已经避免了这种情况，因为你在预测它input本身的存在而不是input.value.

于 2019-05-23T17:05:07.913 回答