第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} : {checked: false};
另一个示例程序一样:
请开一个PR。
@chocolatl
我用的react16 并没有出现你说的这种情况呀
你这个问题是版本问题吧?
而且你这样修改感觉没啥意义,checked="" 其实并没有什么影响,
我看的是第二次印刷版本,书上102页的代码是在return 的JSX中进行的checked属性设置
@joyjoe 仓库中代码的package.json
里React的版本是^15.4.1
,自然以这个为准,我是直接通过npm install
安装的。
我的书也是第二次印刷版本,不过第102页没有你说的代码。
这个问题按我说的步骤测试应该是可以复现的:
实际上这个警告的确没有什么影响,可能我有一点强迫症吧
@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