1

Всем привет, подскажите как удалить выбранный элемент из массива в react.js. То есть у меня есть кнопка по нажатию, на которую должен удаляться выбранный элемент. А так же буду рад, если на основе того же кода поможете мне реализовать редактирование элемента в модальном окне. Заранее всем спасибо и прошу поподробнее объяснить все действия (как для тупой).

Код app.js

import React, {
  useState
} from "react";
import Modal from "./Modal/Modal";
import Tables from "./Tables/Tables";
import './App.css';


function travell(Products) {
  return Products.name;
}

function App() {
  
  const [Products, setProducts] = useState([{
      name: "one",
      count: "1",
      id: 1
    },
    {
      name: "two",
      count: "1",
      id: 2
    },
    {
      name: "third",
      count: "2",
      id: 3
    }
  ]);

  const addProduct = (product) => {
    setProducts([...Products, product]);
  };
  return ( <div>
    <h1 style = {{textAlign: "center"}}> 
      Product 
    </h1>
    <Tables Products = {Products}/>
    <Modal add = { addProduct}/>
    
    </div>
  );
}

export default App; 

Код Modal.js

import React from "react";
import './Modal.css'

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.nameInput = React.createRef();
    this.countInput = React.createRef();
    this.addHandler = this.addHandler.bind(this);
  }

  addHandler() {
    const name = this.nameInput.current.value;
    const count = this.countInput.current.value;
    this.props.add({ name, count });
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <React.Fragment>
        <button
          style={{ left: "40%", position: "relative" }}
          onClick={() => this.setState({ isOpen: true })}
        >
          Open modal
        </button>

        {this.state.isOpen && (
          <div className="modal">
            <div className="modal-body">
              <h1>Product</h1>
              <p>Name</p>
              <input ref={this.nameInput} type="text" />
              <p>Count</p>
              <input ref={this.countInput} type="number" />
              <button onClick={this.addHandler}>Add</button>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
}

Код для Table.js

import React from 'react';
import '../App.js';
import './Tables.css';
import Modal from "../Modal/Modal";




function Tables (props) {
    <Modal />



   
    return (
        <div>
        <table>
            <tr>
                <td>
                Product
                </td>
                <td>
                Count
                </td>
            </tr>
            {props.Products.map((item,i)=><tr key={i}>
                <td>{item.name}</td>
                <td>{item.count}</td>
                
                <button onDelete ={() => {} }>delete</button>  
                
            </tr>
            )}
        </table>
            

        </div>
    )
}
export default Tables
2
  • filter
    – meine
    Commented 11 нояб. 2020 в 9:19
  • @meine, не получается реализовать, постоянно ошибки вылазят Commented 11 нояб. 2020 в 9:24

1 ответ 1

1
  1. добавьте в App функцию удаления

const deleteProduct = (product) => {
  setProducts(Products.filter(p => p !== product));
};

  1. прокиньте ее в Table

<Tables Products = {Products} delete={deleteProduct}/>

  1. добавьте ее в обработчик клика в Table.js

<td><button onClick ={() => {props.delete(item)} }>delete</button></td>

и хорошо что вы добавили id в модель, замените key на item.id (ну и добавляйте id при добавлении позиции)

7
  • Спасибо большое за ответ, вы мне очень помогли и в этот раз) Подскажите, а каким образом надо заменить key на item.id? @ЕвгенийПлатов Commented 11 нояб. 2020 в 9:58
  • там где <tr key={i}>, вы будете удалять элементы, i начнет сдвигаться. Надо заменить на <tr key={item.id}> Commented 11 нояб. 2020 в 10:04
  • и там где вы добавляете элемент, надо в объект добавить поле id c уникальным значением Commented 11 нояб. 2020 в 10:05
  • я тупая. Пытаюсь в Modal.js добавить поле id и не получается( Как мне надо прописать в коде id для добавленного элемента, которое будет больше предыдущего на 1? Commented 11 нояб. 2020 в 10:50
  • codepen.io/Manfrid/pen/LYZXgdO?editors=1111 такой класс добавьте в Modal (или импортирйте из вне) , но так как у вас 3 уже есть, поменяйте стартовое значение на 3. Тогда item будет формироваться this.props.add({ name, count,id:idGenerator.next() }); Commented 11 нояб. 2020 в 11:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.