[英]React error: from controlled to uncontrolled component
EDIT: this question was marked as a duplicate by some users. 编辑:此问题被某些用户标记为重复。 Not sure if they read it before doing so.
不知道他们在这样做之前是否已阅读过。 If someone did, please clarify in which sense this is a duplicate.
如果有人这样做,请说明在什么意义上是重复的。
I have a component for checkboxes: 我有一个复选框组件:
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>
);
}
}
This component returns an error when the value changes. 值更改时,此组件将返回错误。
Warning: A component is changing an uncontrolled input of type checkbox to be controlled.
警告:组件正在更改要控制的类型为非受控输入的复选框。 Input elements should not switch from uncontrolled to controlled (or vice versa).
输入元素不应从不受控制切换为受控制(反之亦然)。 Decide between using a controlled or uncontrolled input element for the lifetime of the component.
确定在组件的使用寿命期间使用受控或不受控制的输入元素。
But if I replace: 但是,如果我替换:
let inputValue = (input && input.value) || value;
with 与
let inputValue = value;
if (input) {
inputValue = input.value;
}
Like so: 像这样:
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>
);
}
}
It doesn't return any error. 它不返回任何错误。 Why?
为什么?
One possibility—there's not enough information here to say for sure—is that input.value
is present but false
(or falsy), so you fall back to the value
prop, which is undefined
, and you end up setting checked
to undefined
on your input. 一种可能性,有没有足够的信息,这里说的肯定,是
input.value
是存在的,但false
(或falsy),这样你就回落到value
道具,这是undefined
,你最终设置checked
到undefined
您输入。
This results in an uncontrolled checkbox. 这将导致不受控制的复选框。
Then, on a subsequent pass, either input.value
or props.value
has changed and you set checked
to a real value, which means it's now a controlled input and react emits the warning. 然后,在随后的遍历中,
input.value
或props.value
都已更改,并且您将checked
设置为实际值,这意味着它现在是受控输入,并且react会发出警告。
In your initial case you'll get the value
prop even if input.value
is explicitly false
or 0
or an empty string: 在最初的情况下,即使
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;
In your modified case… 在您修改的情况下...
let inputValue = value;
if (input) {
inputValue = input.value;
}
…you've avoided that scenario because you're predicating it on the presence of input
itself rather than input.value
. …您避免了这种情况,因为您是根据
input
本身而不是input.value
来预测它的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.