Question

我有一个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

我不确定我做错了什么，我应该关注它。

Answer 1

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

在未通过道具时，我已在构造函数中将undefined更改为false：

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

React中的受控和不受控制的元素。 _class正在改变一个不受控制的输入

1 个答案: