Question

react给我一个警告：“组件正在将要控制的类型的不受控制的输入更改为复选框。输入元素不应从不受控制的状态切换为受控制的状态（反之亦然）。”

但是，我的checbox是通过state属性进行更改的。我缺少明显的东西吗？

    import React from 'react';

// Components
import Checkbox from './checkbox';
import HelpBubble from './helpBubble';

export default class CheckboxField extends React.Component {


    constructor(props) {
        super(props);
        this.state = {value: props.value};
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.value !== this.props.value) {
            this.setState({value: nextProps.value});
        }
    }

    render() {
        const {label, meta = {}, help, disabled, required, onChange} = this.props;

        return (
            <label className="checkbox-wrap form-field">
                <Checkbox
                    disabled={disabled}
                    type="checkbox"
                    onChange={(event) => {
                        onChange(event, !this.state.value);
                    }}
                    checked={this.state.value}/>
                {label && (
                    <div className="checkbox-label">
                        {label}
                        {required && <div className="form-field__required"/>}
                    </div>
                )}
                {help && <HelpBubble help={help}/>}
                {meta.error && meta.touched && (
                    <div className="input-error">{meta.error}</div>
                )}
            </label>
        );
    }}

父组件： handleChangeParams（键，值） } /> 处理更改参数会更改模型中的值并调用服务器。根据服务器结果，该值可以更改。

谢谢。

Answer 1

如果您的状态以props.value为null进行初始化，那么React将认为您的Checkbox组件不受控制。

尝试设置您的初始状态，以使该值永远不会为null。

this.state = { value: props.value || "" };

Answer 2

上面的代码片段值得一提。当通过props在构造函数中设置状态时，总是最好将状态设置为“受控”值，即有形值，例如int，float，string，array，map等。得到的错误是props.value的结果设置为null

因此，考虑如下设置构造函数状态：

this.state = {
    value: props.value ? props.value : 'empty'
}

这里发生的是检查props.value是否具有值，是否将状态设置为props.value，如果props.value为空，则将状态设置为字符串： ''空'

Answer 3

如果您使用复选框，则react也不喜欢字符串，因此请尝试

this.state = { checkboxValue: props.checkboxValue || false };

Answer 4

就我而言，我使用来自我的 redux 商店的道具来设置是否选中该复选框，只需将该属性默认为 false 对我有用。

例如

const MyComponent = ({
  somePropFromRedux
}) => {
  return <thatThridPartyCheckboxComponent checked={somePropFromRedux} />
}

变成（唯一的变化是在第 2 行添加 = false）

const MyComponent = ({
  somePropFromRedux = false
}) => {
  return <thatThridPartyCheckboxComponent checked={somePropFromRedux} />
}

Answer 5

另一种简单的方法是 !! 您的 props.checkboxValue 值。这样，即使未定义，!!props.checkboxValue 也会解析为 false。

this.state = { checkboxValue: !!props.checkboxValue };

反应组件正在更改要控制的复选框类型的不受控制的输入

5 个答案: