React 中受控和不受控的元素。 _class 正在更改不受控制的输入答案

【问题标题】：Controlled and uncontrolled elements in React. _class is changing an uncontrolled inputReact 中受控和不受控的元素。 _class 正在更改不受控制的输入
【发布时间】：2017-06-30 11:49:57
【问题描述】：

我有一个 Checkbox 组件，它是一个简单的复选框，但样式符合我的需要，因为它具有自定义的“假元素”，可以作为原始元素。

复选框

import React, {Component} from 'react';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import '../../../stylesheets/common/forms/Checkbox.scss';

export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {checked: props.checked};
    }

    toggle() {
        const checked = !this.state.checked;
        this.setState({checked});
    }

    /**
     * custom prop indicates that we want create custom element to toggle checkbox ie. ImageCheckbox
     * 
     */
    render() {
        const {id, className, children, name, custom = false} = this.props;
        const toggle = this.toggle.bind(this);
        return (
            <FormGroup className={`Checkbox ${className}`}>
                <input id={id}
                       name={name}
                       type="checkbox"
                       checked={this.state.checked}
                       onChange={toggle}/>
                {!custom && <div className="fake-checkbox" onClick={toggle}/>}
                <label htmlFor={id}>{ children }</label>
            </FormGroup>
        )
    }
}

正如注释在代码组件中所说，它允许在标签内创建一个自定义的“假”元素作为复选框的切换。

ImageCheckbox：

import React from 'react';
import Checkbox from '../../common/forms/Checkbox';
import '../../../stylesheets/common/forms/ImageCheckbox.scss';

export default props => (
    <Checkbox className="ImageCheckbox" {...props} custom={true}>
        <div className="image"
             style={{backgroundImage: 'url(' + props.href + ')'}}>
            <p>{ props.children }</p>
        </div>
    </Checkbox>
);

它按我想要的方式工作，但是当我单击 ImageCheckbox 时，我在浏览器中收到警告：

warning.js:36 警告：_class 正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控切换到受控（反之亦然）。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。更多信息：https://facebook.github.io/react/docs/forms.html#controlled-components

我不确定自己做错了什么，是否应该担心。

【问题讨论】：

标签： javascript reactjs checkbox react-bootstrap

【解决方案1】：

我在亚当的回复React - changing an uncontrolled input中找到了答案。

当没有传递 prop 时，我在构造函数中将 undefined 更改为 false：

constructor(props) {
    super(props);
    const {checked = false} = props;
    this.state = {checked};
}

【讨论】：