第四章的todoList示例程序勾选框没有被正确渲染

[1998czk]

如图，左侧的勾选框没有被渲染出来，想请教一下是什么问题？与react版本有关嘛？
这是书中的源代码，看上去并没有问题

const TodoItem = ({onToggle, onRemove, completed, text}) => {
  const checkedProp = completed ? {checked: true} : {checked: false};
  return (
    <li
      className="todo-item"
      style={{
        textDecoration: completed ? 'line-through' : 'none'
      }}
    >
      <input className="toggle" type="checkbox" {...checkedProp} onClick={onToggle} />
      <label className="text">{text}</label>
      <button className="remove" onClick={onRemove}>×</button>
    </li>
  )
}

[opsn]

请问解决了吗？我也遇到了相同的问题。

[sw]

仍没有解决

[Fenn]

样式问题，在.todo-item .toggle 里加上width好了
{ height: 40px; width: 100%; -webkit-appearance: none; appearance: none; position: absolute; top: 0; bottom: 0; }

[Xin.Li]

https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/

[meowstic]

你好，我已经收到了您的邮件，将尽快给您回复，如果有急事请联系QQ：929644473

[yjunli]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。