从 React 中的数组中删除项目 [英] Remove item from array in React

问题描述

我的 removeItem 函数有问题(它应该删除当前的 <li> 该按钮嵌套在其中，以及 this.state.list 上数组中的项目)，目前没有代码，因为我尝试很多事情都没有，所以我最终在 console.logs 看发生了什么，所以我删除了它

import React, { Component } from 'react';导入'./Todo.css';类 Todo 扩展组件 {构造函数(道具){超级(道具)；this.state = {列表: []，文本: ''}this.textChange = this.textChange.bind(this);this.addToList = this.addToList.bind(this);this.removeItem = this.removeItem.bind(this);}文本更改(e){this.setState({文本:e.target.value})}添加到列表() {this.setState(prevState => ({列表:prevState.list.concat(this.state.text),文本: ''}))}removeItem(e) { ????????}使成为() {返回(<div><h1>我的待办事项列表</h1><h3>添加项目</h3><输入值={this.state.text} onChange={e =>this.textChange(e)}/><button onClick={this.addToList}>+</button><ul>{this.state.list.map((x,y) =>{返回 
{x}<button onClick={this.removeItem}>-</button></li>})}

)}}导出默认 Todo；

解决方案

从数组中移除项目按索引:

const newList = this.state.list.splice(index, 1);

从数组中移除项目按值:

const newList = this.state.list.splice(this.state.list.indexOf(value), 1);

I have problem with removeItem function (it should remove current <li> that button is nested in, and item from array on this.state.list), no code currently because I try so much things of that and nothing working so I end up on console.logs watch what happened so I deleted it

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

class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            text: ''
        }
        this.textChange = this.textChange.bind(this);
        this.addToList = this.addToList.bind(this);
        this.removeItem = this.removeItem.bind(this);
    }

    textChange(e) {
        this.setState({
            text: e.target.value
        })
    }

    addToList() {
        this.setState(prevState => ({
            list: prevState.list.concat(this.state.text),
            text: ''
        }))
    }

    removeItem(e) { ?
        ? ? ? ? ? ? ?
    }

    render() {
        return(
          <div>
            <h1>My Todo List</h1>
            <h3>Add item</h3>
            <input value={this.state.text} onChange={e => this.textChange(e)}/>
            <button onClick={this.addToList}>+</button>
            <ul>{this.state.list.map((x,y) => {
              return <li key={y}>{x}
              <button onClick={this.removeItem}>-</button>
              </li>})}
            </ul>
          </div>
        )
    }
}

export default Todo;

解决方案

Removing item from array by index:

const newList = this.state.list.splice(index, 1);

Removing item from array by value:

const newList = this.state.list.splice(this.state.list.indexOf(value), 1);

这篇关于从 React 中的数组中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！