mocheng / react-and-redux

《深入浅出React和Redux》代码

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

第4章 Todo示例在控制台中出现警告:TodoItem is changing an uncontrolled input of type checkbox to be controlled

chocolatl opened this issue · comments

新增一个待办事项后将新建的待办事项切换为已完成状态,将会出现警告。原因应该是初始渲染<input>时没有设置value属性。

const checkedProp = completed ? {checked: true} : {};

应该修改为:const checkedProp = completed ? {checked: true} : {checked: false};

另一个示例程序一样:

const checkedProp = completed ? {checked: true} : {};

请开一个PR。

@chocolatl
我用的react16 并没有出现你说的这种情况呀
你这个问题是版本问题吧?
而且你这样修改感觉没啥意义,checked="" 其实并没有什么影响,
我看的是第二次印刷版本,书上102页的代码是在return 的JSX中进行的checked属性设置

@joyjoe 仓库中代码的package.json里React的版本是^15.4.1,自然以这个为准,我是直接通过npm install安装的。

我的书也是第二次印刷版本,不过第102页没有你说的代码。

这个问题按我说的步骤测试应该是可以复现的:

tim 20171121230820

实际上这个警告的确没有什么影响,可能我有一点强迫症吧

@chocolatl
昨天可能是看岔了,应该是96页代码。
第二段代码里面的TodoItem组件中的input[type=checkbox]元素的checked属性值是在Input元素里面设置的,并不是在外面单独定义的变量。
然后提示说的是不要在受控和非受控组件之间切换,应该指的就是你设置了checked属性但是并没有设置onchange事件监听。 在react16中,如果不设置readOnly属性,也会报错,和这个类似,但是提示的是要么设置onchange,要么设置readonly。
当然如果你想使用非受控组件,那么可以使用defaultChecked属性设置默认值,然后在onclick事件中进行input的checked切换。

@joyjoe 书中确实和仓库里的代码有点不同,那个警告应该是因为React期望一个会在更新时改变的属性在挂载组件时存在初始状态。这有个类似的例子:https://stackoverflow.com/questions/37427508/react-changing-an-uncontrolled-input