反应 通过已完成的项目创建行 待办事项列表应用程序

Question

我在待办事项列表应用程序上为已完成的项目创建线条时遇到问题

我已经尝试了几种不同的方法来完成此任务，但上周才开始使用 react 并且无法让我的 handleCheck(( 函数在已完成的项目中创建一行。 我将提供代码笔网址 - 任何帮助将不胜感激！其他一切正常，这是一个延伸的目标，因为我是 JS/React/编码的新手。 我认为我的问题源于这样一个事实，即我的初始状态的设置方式不会使单个数组元素中的更新状态变得简单/我正在尝试更新数组中一个动态创建的元素的状态，这对我来说很难概念化现在:(

密码笔：https://codepen.io/jackgilbertx/pen/gNOqGY

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      items: [],
      completed: false
    };
    this.handleRemove = this.handleRemove.bind(this);
    this.handleCheck = this.handleCheck.bind(this);
  }
  onChange = (event) => {
    this.setState({ term: event.target.value });
  }
  onSubmit = (event) => {
    event.preventDefault();
    if(this.state.term.length < 34){
    this.setState({
      term: '',
      items: [...this.state.items, this.state.term]
    });
  }else{
    alert('limit to 33 characters')
  }
  }
  handleRemove(index, event){
    if(confirm('are you sure?')){
    let todoArray = this.state.items;
    todoArray.splice(index, 1)
    this.setState({
      items: todoArray
    })
  }}
 handleCheck(index, event){
  // code to create line through completed item
 }

  render() {
    return (
      <div className="container">
        <h1>To Do App</h1>
        <form className="App" onSubmit={this.onSubmit}>
          <input className="input" value={this.state.term} onChange= 
  {this.onChange} />
          <button className="btn btn-primary">Submit</button>
        </form>
        <ul class="list-group">
            {this.state.items.map((item, index) => 
                   <li  
                     class="list-group-item"
                     key={index}>
                     <input id="chk" onChange={this.handleCheck} 
type="checkbox" /> {item}      
                     <button 
                       className="btn btn-info"
                     onClick= 
{event=>this.handleRemove(index,event)}>X</button>
                     </li>)}                      
       </ul>
      </div>
    );
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

Answer 1

您可以将

completed状态初始化为对象，并将已完成的待办事项索引保留在那里。例如，当您切换待办事项时，您的状态将像这样更改：

completed: {
    0: true,
    1: false,
}

代码部分正在这样做：

handleCheck(index) {
  // code to create line through completed item
  this.setState(state => ({
    completed: { ...state.completed, [index]: !state.completed[index] }
  }));
}

我们正在传播已完成的状态，并将待办事项的索引作为true和false进行操作。

工作示例：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      items: [],
      completed: {},
    };
    this.handleRemove = this.handleRemove.bind(this);
    this.handleCheck = this.handleCheck.bind(this);
  }
  onChange = event => {
    this.setState({ term: event.target.value });
  };
  onSubmit = event => {
    event.preventDefault();
    if (this.state.term.length < 34) {
      this.setState({
        term: "",
        items: [...this.state.items, this.state.term]
      });
    } else {
      alert("limit to 33 characters");
    }
  };
  handleRemove(index, event) {
    if (confirm("are you sure?")) {
      let todoArray = this.state.items;
      todoArray.splice(index, 1);
      this.setState({
        items: todoArray
      });
    }
  }
  handleCheck(index, event) {
    // code to create line through completed item
    this.setState(state => ({
      completed: { ...state.completed, [index]: !state.completed[index] }
    }));
  }
  render() {
    return (
      <div className="container">
        <h1>To Do App</h1>
        <form className="App" onSubmit={this.onSubmit}>
          <input
            className="input"
            value={this.state.term}
            onChange={this.onChange}
          />
          <button className="btn btn-primary">Submit</button>
        </form>
        <ul class="list-group">
          {this.state.items.map((item, index) => (
            <li
              style={{
                textDecoration: this.state.completed[index]
                  ? "line-through"
                  : ""
              }}
              key={index}
            >
              <input
                id="chk"
                onChange={() => this.handleCheck(index)}
                type="checkbox"
              />{" "}
              {item}
              <button
                className="btn btn-info"
                onClick={event => this.handleRemove(index, event)}
              >
                X
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />