从 React js 中的列表中删除项目

IT技术 reactjs
2021-05-17 22:39:12

我正在创建一个待办事项应用程序，当我们单击它们时，我无法编写用于删除列表元素的代码。我希望在用户单击时删除特定项目

class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    remove{

    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map(function(todo) {
                      return <li>{todo}</li>

                 })}

              </ul>
            </div>
        )
    }
};
2个回答

您需要传递待办事项的索引，然后使用 javascript 中的 slice 函数将其删除，例如 

remove(e, index){
      var todos = [...this.state.todos];
      todos.slice(index, 1);
      this.setState({todos})
}


class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    deleteTodo(index){
        console.log(index)
         var todos = [...this.state.todos];
         todos.splice(index, 1)
         this.setState({todos})
    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map(function(todo, index) {
                      return <li key={index} onClick={this.deleteTodo.bind(this, index)}>{todo}</li>

                 }.bind(this))}

              </ul>
            </div>
        )
    }
};

ReactDOM.render(<Todo/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

onClick为每个 todo 元素定义一个方法，并绑定名称，如下所示：

{this.state.todos.map((todo) => { //use arrow function to bind the context
       return <li onClick={this._deleteTodo.bind(this, todo)}>{todo}</li>
})}

每当您单击任何待办事项时，它都会将其名称传递给onClick函数，现在用于indexOf计算该项目在 中的索引array，并使用splice将其从列表中删除，例如 ethis：

_deleteTodo(value){
    let todos = this.state.todos.slice();  //create a copy of that array first
    todos.splice(todos.indexOf(value), 1);
    this.setState({todos});  
}

检查工作示例：

class Todo extends React.Component {

    constructor(props) {
      super(props);
      this.state={todos:[]};
    }

    save() {
      var todos = [...this.state.todos];
      todos.push(this.newText.value);
      this.setState({todos});
    }

    _deleteTodo(value){
       let todos = this.state.todos.slice();  
       todos.splice(todos.indexOf(value), 1);
       this.setState({todos});  
    }


    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref={(ip) => {this.newText = ip}}/>
              <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
              </button>
              <ul>
                {this.state.todos.map((todo) => {
                    return <li onClick={this._deleteTodo.bind(this, todo)}>{todo}</li>
                })}
              </ul>
            </div>
        )
    }
};

ReactDOM.render(<Todo/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

其它你可能感兴趣的问题
上一篇如何选择多个复选框reactjs？ 下一篇使用 reactjs 切换组件