flux-todolist exercise

flux todo demo

flux-todolist's People

Contributors

Stargazers

Watchers

flux-todolist's Issues

Warning: TodoItem is changing a controlled input of type checkbox to be uncontrolled.

1.案例源码TodoItem.jsx中如下代码

return (
      <li className={classNames({
            "completed": todo.complete,
            "editing": this.state.isEditing
          })}
          key={todo.id}>
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            // 直接使用todo.complete, 控制台会有警告
            // Warning: TodoItem is changing a controlled input of type checkbox
            // to be uncontrolled.
            checked={todo.complete}
            onChange={this._onToggleComplete}
          />

input元素checked属性直接赋值**{todo.complete}**，这样的话如果双击编辑todo item后回车保存时，浏览器控制台会弹出如下警告

Warning: TodoItem is changing a controlled input of type checkbox to be uncontrolled.

该告警的意思是表示input元素的checked属性可能不是true或false，也可能是undefined，因此报了该警告，只要保证checked属性是否为true或false，就不会再报了。
2. 修正后的代码如下(TodoItem.jsx):

  return (
      <li className={classNames({
            "completed": todo.complete,
            "editing": this.state.isEditing
          })}
          key={todo.id}>
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            // 直接使用todo.complete, 控制台会有警告
            // Warning: TodoItem is changing a controlled input of type checkbox
            // to be uncontrolled.
            checked={todo.complete ? true : false}
            onChange={this._onToggleComplete}
          />

Recommend Projects