Question

我无法在待办事项列表应用中通过完成的项目创建一条线

我尝试了几种不同的方法来完成此任务，但是上周才开始使用react，并且无法获取handleCheck（）函数来创建已完成项目的行。我将提供codepen网址-任何帮助将不胜感激！其他一切都工作正常，这是一个扩展目标，因为我通常对JS / React / coding还是陌生的。我认为我的问题源于以下事实：我的初始状态的设置方式不容易使更新单个数组元素中的状态变得容易/我试图更新一个动态数组中一个动态创建的元素的状态。我现在很难概念化的数组：（

CODEPEN：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" />

REACT通过完成的项目TODO LIST应用创建行

1 个答案: