javascript - React：为什么只触发无序列表的第一个项目复选框？

Question

我想呈现一个任务列表。每个任务都应该有一个复选框。我使用 css 设计了复选框。但是现在当我点击任何复选框时，只会触发第一个列表项复选框。

待办事项组件

const Todo = ({ todo, toggleTodo }) => {
  return (
    <li className='listItem' key={todo.id}>
      <div className='round'>
        <input
          type='checkbox'
          id='checkbox'
          checked={todo.completed}
          onClick={() => toggleTodo(todo.id)}
        />
        <label for='checkbox'></label>
        <span className="todo__task">{todo.task}</span>
      </div>
    </li>
  );
};

export default Todo;

CSS

.round {
  position: relative;
}

.round label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: '';
  height: 6px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(-45deg);
  width: 12px;
}

.round input[type='checkbox'] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
    background-color: #66bb6a;
    border-color: #66bb6a;
  }
  
  .round input[type="checkbox"]:checked + label:after {
    opacity: 1;
  }
  

我想在每个列表项上触发复选框。我怎样才能做到这一点？

标签： javascriptcssreactjs

Answer 1

这应该可以解决您的问题：

const Todo = ({ todo, toggleTodo }) => {
  return (
    <li className='listItem' key={todo.id}>
      <div className='round'>
        <input
          type='checkbox'
          id={todo.id} // <---
          checked={todo.completed}
          onClick={() => toggleTodo(todo.id)}
        />
        <label for='checkbox'></label>
        <span className="todo__task">{todo.task}</span>
      </div>
    </li>
  );
};

export default Todo;