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

[chocolatl]

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

react-and-redux/chapter-04/todo/src/todos/views/todoItem.js

Line 4 in 9cbeab9

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

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

另一个示例程序一样：

react-and-redux/chapter-04/todo_controlled_component/src/todos/views/todoItem.js

Line 4 in 9cbeab9

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

[mocheng]

请开一个PR。

[joyjoe]

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

[chocolatl]

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

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

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

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

[joyjoe]

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

[chocolatl]

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