Question

我有removeItem函数的问题（它应该删除该按钮嵌套的当前import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams} from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-check', templateUrl: 'check.html', }) export class CheckPage { tabBarElement: any; // hidetab constructor(public navCtrl: NavController, public navParams: NavParams) { this.tabBarElement = document.querySelector('.tabbar.show-tabbar');// hidetab } ionViewDidLoad() { console.log('ionViewDidLoad CheckPage'); } ionViewWillEnter() { this.tabBarElement.style.display = 'none'; // hidetab } ionViewWillLeave() { this.tabBarElement.style.display = 'flex'; // hidetab } takeMeBack() { this.navCtrl.parent.select(0); // backbutton } }，以及this.state.list上的数组中的项目），目前没有代码，因为我尝试了很多这样的事情而没有任何东西工作，所以我最终<li>观察发生的事情，所以我删除了它

console.logs

Answer 1

在我的解决方案中例如：

const remove = (i) => {
        const arr = data.filter((item) => item.name !== i);
        setData(arr);
    };

我过滤了未删除的项目，然后再次设置状态

Answer 2

removeItem(item) {
    const item = getItem(this.state.list, item.id) // Method to get item in list through comparison (IE: find some item with item.id), it has to return ITEM and INDEX in array
    const newlist = [].concat(list) // Clone array with concat or slice(0)
    newlist.splice(item.index, 1);
    this.setState({list: newlist});       
  }

Answer 3

通过索引从数组中删除项目：

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

按值从数组中删除项目：

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

Answer 4

您可以按所需的问题过滤列表，它将被自动删除，例如，如果您要删除所有项目= 3：

列表：constant <- function(x, n = 6) { sequence(rle(as.character(x))$lengths) >= n } df[is.na(df$Sub_asset),]$Sub_asset <- "NA" df %>% split(list(.$Asset, .$Sub_asset)) %>% lapply(function(x) { arrange(x, Date_Time) %>% mutate(supply_constant_check = ifelse(constant(Supply), "Constant", "Not Constant"), return_water_constant_check = ifelse(constant(Return_water), "Constant", "Not Constant")) }) %>% bind_rows() # A tibble: 10 x 7 Date_Time Asset Sub_asset Supply Return_water supply_constant_check return_water_constant_che~ <int> <fct> <chr> <dbl> <dbl> <chr> <chr> 1 235 AHU_01 NA 0 64.4 Not Constant Not Constant 2 252 AHU_01 NA 0 64.1 Not Constant Not Constant 3 253 AHU_01 NA 0 64.1 Not Constant Not Constant 4 235 AHU_100 NA 68.1 69.3 Not Constant Not Constant 5 252 AHU_100 NA 68.1 69.3 Not Constant Not Constant 6 253 AHU_100 NA 68.2 69.4 Not Constant Not Constant 7 235 AHU_101 NA 62.2 53.2 Not Constant Not Constant 8 252 AHU_101 NA 62.1 53.1 Not Constant Not Constant 9 235 AHU_32 NA 0 59.3 Not Constant Not Constant 10 252 AHU_32 NA 0 59.2 Not Constant Not Constant

祝你好运！

Answer 5

我会在点击后传递列表中项目的索引然后拼接数组：

<ul>
  {
    this.state.list.map((x,y) => {
      return (
        <li key={y}>
          {x}
          <button onClick={() => this.removeItem(y)}>-</button>
        </li>
      );
    })
  }
</ul>

然后在removeItem：

removeItem(index) {
  const list = this.state.list;
  list.splice(index, 1);
  this.setState({ list });
}

Answer 6

我认为您应该将项目的索引传递给removeItem函数。像这样：

removeItem(index) {
  const list = this.state.list;

  list.splice(index, 1);
  this.setState({ list });
}

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((text, i) => {
          return (
            <li key={i}>
              {text}
              <button onClick={() => this.removeItem(i) }>-</button>
            </li>
          );
        })}
      </ul>
    </div>
  )
}

Answer 7

＆＃13;

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);
  }

  textChange(e) {
    this.setState({
      text: e.target.value
    })
  }

  addToList() {
    this.setState(prevState => ({
      list: prevState.list.concat(this.state.text),
      text: ''
    }))
  }

  removeItem(index) {
    let newList = this.state.list.splice(index,1);
    this.setState({list:newList})
  }

  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.bind(this,y)}>-</button>
          </li>})}
        </ul>
      </div>
    )
  }
}

export default Todo;

＆＃13;

Answer 8

  _deleteTodo(index) {
    console.log("delete " + index);
    this.state.todos.splice(index, 1);
    this.setState({
      todos: this.state.todos.filter(i => i !== index)
    });
  }

我的接头有问题，老实说我不知道为什么。但是此方法对我有用，您可以尝试！附言如果有人知道为什么拼接不能与状态和索引一起工作，请让我知道我很好奇！

在React中从数组中删除项目

8 个答案: