Question

如果在组件的生命周期中将组件从受控组件转换为非受控组件（反之亦然），则React会发出警告。

除了这个令人困惑的理由之外，是否有其他技术原因不建议这样做？

Answer 1

根据我的经验，我认为主要原因是防止混淆和意外行为（因此 - 错误）。

此警告自ReactJS 15发布以来。在之前的主要版本 - React 14（技术上，React 0.14） - 没有这样的警告。

因此，这是一个流行的误解，说明了可能的混淆。我forked your jsfiddle并做了以下更改：

切换到ReactJS为14（技术上，React 0.14）
我为value（空字符串）和defaultValue添加了值（＆＃39; hello＆＃39;）。

不再有控制台警告了。这就是误解：人们可能认为默认（初始）值将是“你好”。然后 - ＆gt;因为输入是受控的 - ＆gt;所有未来的价值变化都将存储在组件状态中。

但事实并非如此。默认显示的值是空字符串，而不是＆＃39; hello＆＃39;。相信我，对于那些努力掌握控制输入背后的想法的开发人员来说，这会引起混乱。我自己经历过这个！

因此，切换回React 15，你会得到一个很好的警告：

输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素。

它没有告诉你完整的故事为什么，但至少它指示你在哪里阅读和如何来解决它。比没有警告好多了，对吗？： - ）

Answer 2

直接回答问题：从受控到不受控制的来回切换不是按预期使用工具，可能会导致一些奇怪的行为。正如您所提到的，这将使得很难理解实际发生的事情（作为程序员，您应该尝试避免使用这种类型的代码）。此外，我无法想到需要或期望来回切换的情况。你有什么需要的例子吗？

这里有几点需要注意。如果您从评论中打开jsfiddle，则会立即注意到两条警告消息：

警告：value上的input道具不应为空。考虑使用   清空组件的空字符串或undefined   不受控制的组件。

警告：FormPresenter包含两个值都带有text类型的输入   和defaultValue道具。输入元素必须是受控的或   不受控制的（指定值prop或defaultValue prop，   但不是两个）。决定使用受控或不受控制的输入   元素并删除其中一个道具。

将jsx放在此处以供参考：

  <input 
    type="text" 
     value={this.state.value} 
     defaultValue={this.state.defaultValue}
     onChange={this.handleChange}
  />

第一个警告告诉您，您作为一个价值传递的内容有问题，这就是为什么它会给您提出您所询问的错误（更多内容会在一分钟内发出））。

第二个警告告诉您受控组件应仅使用value，不受控制的组件应仅使用defaultValue。这里的原因是，如果您需要为受控组件设置默认值，您可以默认将传递给value的值。如果你正在使用一个不受控制的组件，你只关心设置一个默认值，因为你希望浏览器正常管理当前值。

所以，现在当你输入输入时，它会给你第三个警告：

警告：FormPresenter正在更改文本类型的不受控制的输入被控制。输入元素不应从不受控制的方式切换控制（反之亦然）。决定使用受控制的还是组件寿命的不受控制的输入元素

这与第一次警告有关。由于您将this.state.value默认为null，因此input不会被视为受控制。如果将默认值更改为空字符串（''），则表示您正确控制输入，并且不会收到警告消息。 jsfiddle updated to show this

为什么不建议将React组件从受控切换到不受控制？

2 个答案: