Javascript React Todo复选框一次设置所有列出项目的样式

我正在尝试使用React创建待办事项列表。我可以在显示区显示列表，也可以删除项目。但是，当我单击一个复选框时，所有复选框都被选中，并且该类将应用于所有列表项。我不确定我做错了什么

我尝试使用与删除项目相同的逻辑（即使用过滤器），但它不起作用。我在这里查看了其他案例，但它们主要是关于如何使用jQuery实现的

这是我问题的一个有效例子

这是列表类

class List extends Component {

  state={
    check: false,
    strike: 'none'
  }

  onCheck(item){
    this.setState({check: !this.state.check})
    if (this.state.strike === 'none'){
      this.setState({strike: 'line-through'})
    } else {
      this.setState({strike: 'none'})
    }
  }

  render() {
    const strike = {
      textDecoration: this.state.strike,
    }

  return (
    <ul className='list-style'>
      { this.props.items.map((item, index) =>
         <li key={index}>
           <div className="outer-div">
             <div className="item-checkbox">
               <input type="checkbox" checked={this.state.check}
                 onChange={() => this.onCheck(item)} />
              </div>
              <div className="item-text">
                 <span style= {strike}> {item} </span>
              </div>
              <div className="item-remove-div">
                <button className="item-remove" onClick={() => this.props.onDeleteList(index)}>
                  Remove
                </button>
              </div>
            </div>
             <br />
         </li>
       )}
    </ul>
  )}
}

export default List;

类列表扩展组件{
陈述={
检查：错误，
罢工：“没有”
}
onCheck（项目）{
this.setState（{check:！this.state.check}）
如果（this.state.strike==='none'）{
this.setState（{strike:'line-through'}）
}否则{
this.setState（{strike:'none'}）
}
}
render（）{
常量罢工={
text装饰：this.state.strike，
}
返回(

{this.props.items.map（（项目，索引）=>

this.onCheck（项目）}/>
{item}
this.props.onDeleteList（索引）}>
去除



)}

)}
}
导出默认列表；

这是主要课程：

class Main extends Component {

  state = {
    items: [],
    term : "",
  }

 onChange(event){
   this.setState({ term: event });
 }

 onDelete= (item) =>{
   // this.setState ({
   //   items: this.state.items.filter((i) => i.index !== item.index)
   // })
   this.state.items.splice(item, 1);
   this.setState({items: this.state.items});
 }

  onSubmit= (event) => {
    event.preventDefault();
    if (this.state.term.length > 0){
      this.setState({
        term: '',
        items: [...this.state.items, this.state.term]
      });
    }
  }

  render() {
    return (
      <div className="center">
       <h1 className="header" > TODO-LIST </h1>
       <div className='mainCenter'>
        <form className="App" onSubmit={this.onSubmit}>
          <input placeholder="add task" value={this.state.term} onChange={(e) => this.onChange(e.target.value)}
          className="inputField"/>
          <button>Add to the List</button>
        </form>
        <List items={this.state.items}  onDeleteList={this.onDelete}/>
        <div className="footer-outer">
          <span className="footer"> Number of completed items in an array:  {this.state.items.length} </span>
        </div>
      </div>
    </div>
    );
  }
}

类主扩展组件{
状态={
项目：[]，
术语：“，
}
onChange（事件）{
this.setState（{term:event}）；
}
onDelete=（项目）=>{
//这是我的国家({
//items:this.state.items.filter（（i）=>i.index！==item.index）
// })
本.状态.项目.拼接（项目1）；
this.setState（{items:this.state.items}）；
}
onSubmit=（事件）=>{
event.preventDefault（）；
如果（this.state.term.length>0）{
这是我的国家({
术语：“”，
items:[…this.state.items，this.state.term]
});
}
}
render（）{
返回(
待办事项清单
this.onChange（e.target.value）}
className=“inputField”/>
添加到列表中
数组中已完成的项目数：{this.state.items.length}
);
}
}

我编辑了你的。现在，您可以正确地添加新todo，检查个人任务（在todo单击时切换选中），并在页脚中查看正确的

checked

counter。 查看演示

import React，{Component}来自'React'；
从“/List”导入TodoList；
导入“/style.css”；
类主扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[]，
术语：“”
};
}
handleChange=事件=>{
this.setState（{term:event.target.value}）；
}
handleItemClick=（{value，checked}）=>{
这是我的国家({
items:this.state.items.map（item=>item.value===value？{value，checked:！checked}:item）
});
}
onSubmit=事件=>{
event.preventDefault（）；
如果（this.state.term.length>0）{
这是我的国家({
术语：“”，
items:[…this.state.items，{value:this.state.term，选中：false}]
});
}
}
handleDelete=索引=>{
info（'todo:在索引处删除todo'，索引）；
//删除逻辑…请记住，在jsx上使用索引作为键属性可能会破坏此组件的正确功能。
}
render（）{
返回(
待办事项清单
添加到列表中
阵列中已完成的项目数：
{this.state.items.filter（item=>item.checked.length}
);
}
}
导出默认主

---

import React，{Component}来自'React'；
导入“/style.css”；
类列表扩展组件{
render（）{
const{todos，onTodoClick，onDelete}=this.props；
返回(

{
todos.map（（项目，索引）=>

onTodoClick（项目）}/>
{item.value}
onDelete（索引）}>
去除



)}

)}
}
功能checkboxStyle（已选中）{
返回{
text装饰：选中？'line-through'：'none'，
};
}
导出默认列表；

---

除了这个答案，我建议您考虑将唯一的<代码>键<代码>属性添加到与数组索引不同的每个JSX元素。当前的实现没有问题，但一旦开始删除todo项，可能会显示错误的数据

阅读React文档和这篇文章，其中介绍了使用索引作为键时可能出现的错误。

我编辑了您的。现在，您可以正确地添加新todo，检查个人任务（在todo单击时切换选中），并在页脚中查看正确的

checked

counter。 查看演示

import React，{Component}来自'React'；
从“/List”导入TodoList；
导入“/style.css”；
类主扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[]，
术语：“”
};
}
handleChange=事件=>{
this.setState（{term:event.target.value}）；
}
handleItemClick=（{value，checked}）=>{
这是我的国家({
items:this.state.items.map（item=>item.value===value？{value，checked:！checked}:item）
});
}
onSubmit=事件=>{
event.preventDefault（）；
如果（this.state.term.length>0）{
这是我的国家({
术语：“”，
items:[…this.state.items，{value:this.state.term，选中：false}]
});
}
}
handleDelete=索引=>{
info（'todo:在索引处删除todo'，索引）；
//德
import React, { Component } from 'react';
import TodoList from './List';
import './style.css';

class Main extends Component {
  constructor() {
    super();
    this.state = {
      items: [],
      term: ''
    };
  }

  handleChange = event => {
    this.setState({ term: event.target.value });
  }

  handleItemClick = ({ value, checked }) => {
    this.setState({
      items: this.state.items.map(item => item.value === value ? { value, checked: !checked } : item)
    });
  }

  onSubmit = event => {
    event.preventDefault();

    if (this.state.term.length > 0) {
      this.setState({
        term: '',
        items: [...this.state.items, { value: this.state.term, checked: false }]
      });
    }
  }

  handleDelete = index => {
    console.info('todo: remove todo at index', index);
    // deletion logic... keep in mind that using index as key properties on jsx could breaks the correct functioning of this component.
  }

  render() {
    return (
      <div className="center">
       <h1 className="header" > TODO-LIST </h1>
       <div className='mainCenter'>
       <form className="App" onSubmit={this.onSubmit}>
          <input placeholder="add task" value={this.state.term} onChange={this.handleChange}
          className="inputField"/>
          <button>Add to the List</button>
        </form>
        <TodoList 
          onTodoClick={this.handleItemClick}
          onDelete={this.handleDelete}
          todos={this.state.items}
        />
        <div className="footer-outer">
          <span className="footer">
            Number of completed items in an array:
            {this.state.items.filter(item => item.checked).length}
          </span>
        </div>
      </div>
    </div>
    );
  }
}

export default Main

import React, { Component } from 'react';
import './style.css';

class List extends Component {
  render() {
    const { todos, onTodoClick, onDelete } = this.props;
    return (
      <ul className='list-style'>
        {
          todos.map((item, index) =>
          <li key={index}>
            <div className="outer-div">
              <div className="item-checkbox">
                <input type="checkbox" checked={item.checked}
                  onChange={() => onTodoClick(item)} />
                </div>
                <div className="item-text">
                  <span style={checkboxStyle(item.checked)}>{item.value}</span>
                </div>
                <div className="item-remove-div">
                  <button className="item-remove" 
                    onClick={() => onDelete(index)}>
                    Remove
                  </button>
                </div>
              </div>
              <br />
          </li>
        )}
      </ul>
    )}
  }

function checkboxStyle(checked) {
  return {
      textDecoration: checked? 'line-through' : 'none',
    };
}

export default List;

 onDelete= (item) =>{
   this.state.items.splice(item, 1);
   this.setState({items: this.state.items});
 }

onDelete = (item) => {
  const items = this.state.items.slice();
  items.splice(item, 1);
  this.setState({
    items: items,
  });
}