Dodałem pole wejściowe, które drukowało elementy po przesłaniu. Następnie próbuję usunąć pozycje z listy, dodając przycisk usuwania. Ale przycisk nie działa. Zakładam, że zastosowałem złą logikę w funkcji onDelete. Użyłem funkcji filtra do wydrukowania elementów, które są prawdziwe. Nie jestem pewien, jaki błąd tutaj popełniłem.

App.js:

import React, { Component } from 'react'
import Result from './Result';
import Navbar from './Navbar';
import Jumbotron from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';


export default class App extends Component {
    constructor(){
    super();
      this.state={
        addedItems:[],
        emailValue:''
      }
      this.handleChange=this.handleChange.bind(this);
      this.handleSubmit=this.handleSubmit.bind(this);
      this.onDelete=this.onDelete.bind(this);
    }

     handleChange(e){
       this.setState({
         emailValue:e.target.value
       })
     }

     handleSubmit(e){
      e.preventDefault();
      let items_copy= this.state.addedItems;
      items_copy.push(this.state.emailValue)
      console.log("item copy"+items_copy)
      this.setState({
        addedItems:items_copy,
        emailValue:''
      })
      console.log(this.state.addedItems)
     }

     onDelete(id){
      console.log("deleted clicked")
      let newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id)
      this.setState({
        addedItems:newArray
      })
     }
  render() {
    console.log("")
    return (
     <div>
          <Navbar/>
          <Jumbotron>
          <p>
            Enter the things you would like to buy.
          </p>
        </Jumbotron>

        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Control value={this.state.emailValue} onChange={this.handleChange}type="email" placeholder="Enter email" />
          </Form.Group>
          <Button onClick={this.handleSubmit}variant="primary" type="submit">
            Submit
          </Button>

        </Form>
        {(this.state.addedItems.length>0)?
        <Result item={this.state.addedItems} onDelete={this.onDelete} />:'empty'  }     
      </div>
    )
  }
}

Result.js

 import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
import Button from 'react-bootstrap/Button'

export default function Result(props) {
    const btnStyle={
        marginTop:-7,
        float:'right'
    };
    const {item,onDelete}=props;
    //let show=item.map(item=>item);
    console.log(item) 
    let itemShow = item.map((item, key,id) =>{
     return ( 
         <ListGroup.Item as="li" key={key}>{item}
         <Button onClick={()=>onDelete(id)}style={btnStyle}variant="danger">Delete</Button></ListGroup.Item>
        )})

    return (
        <div>
            <ListGroup as="ul">
                {itemShow}
            </ListGroup>
        </div>
    )
} 
1
user11066242 18 marzec 2020, 02:37

2 odpowiedzi

Najlepsza odpowiedź
let temp = this.state.addedItems;
temp.filter(i=>i.id!==id);
this.setState({
   addedItems: temp
});

Pierwszym argumentem funkcji filtrującej jest bieżący element, który zakładam, że przechowujesz obiekty, więc powyższe powinno działać. Jeśli chcesz filtrować według indeksu, drugim argumentem do filtrowania jest indeks,

.filter((item, index)=>{});
2
bryanstevens314 18 marzec 2020, 00:31

Po prostu zastąp tę linię w swojej metodzie OnDelete:

newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id) 

Przez :

const index = this.state.addedItems.map(function(e) { return e.id; }).indexOf(id);
if (index > -1) {
   this.state.addedItems.splice(index, 1);
}

Powinien załatwić sprawę?

Zgodnie z definicją funkcji łączenia autorstwa Programista Mozilla.

-1
Xavier Brassoud 17 marzec 2020, 23:57