javascript - React Todo 复选框同时设置所有列出的项目的样式

Question

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

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

Here是我的问题的工作示例。

这是列表类

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;

这是主类:

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>
    );
  }
}

Answer 1

我编辑了你的SlackBlitz 。现在，您可以正确添加新的待办事项、检查单个任务(单击待办事项时切换检查)并在页脚中查看正确的checked计数器。检查todo-list-react演示。

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;

<小时/>

除了这个答案之外，我建议您考虑为每个不同于数组索引的 jsx 元素添加一个唯一的 key 属性。当前的实现没有问题，但是一旦开始删除待办事项可能会显示错误的数据。

阅读List and Keys来自 React 文档和这篇关于 Medium 的文章其中涵盖了使用索引作为键时可能出现的错误。