Как получить идентификатор с последней кнопки и удалить его в React с помощью response-id-generator - PullRequest
Новая
       23

Как получить идентификатор с последней кнопки и удалить его в React с помощью response-id-generator

1 голос
/ 29 апреля 2020

Итак, в React я сделал кнопку, которая при каждом нажатии на нее генерирует новую кнопку с уникальным идентификатором, используя react-id-generator.

Теперь я хочу получить идентификатор из последней кнопки в список и каждый раз, когда я нажимаю кнопку удаления, он должен удалять последнюю сгенерированную кнопку.

Вот что я сделал до сих пор, и я попытался удалить последнюю кнопку, но она удаляет все кнопки: 

import React, { Component } from 'react';
import Select, { components } from 'react-select';
import styles from '../styles/loginsignup.css'
import axios from 'axios'
import nextId from "react-id-generator";
export default class AccomodationInfo extends Component {

    constructor() {
        super();
        this.state = {
            accomcate: null,
            addroom: [''],
            isLoading: true,
        }
      }
  handleClick = event => {
        const htmlId = nextId("Room")
        event.preventDefault()
        this.setState({ addroom: [...this.state.addroom, htmlId] })
        }

    handleRemove = event => {
        event.preventDefault()
        this.setState({ addroom: [...""] })
    }



    render() {
        const{accomcate,  isLoading}  = this.state
        return(
            <div>
                <button onClick={this.handleClick}>Add</button>
                <button onClick={this.handleRemove}>Remove</button>
                <div>
                {this.state.addroom.map((addroom) => (
                <div>
                  <button id={addroom}>{addroom}</button>
                </div>
                ))}
              </div>
            </div>



        )


    }


}
}

Кто-нибудь знает, как это сделать правильно?

1 Ответ

1 голос
/ 29 апреля 2020

Вы можете попробовать это: 

handleRemove = event => {
  event.preventDefault()
  console.log(this.state.addroom[-1])
  this.setState(state => state.addroom.pop())
}

Это удалит последний элемент в списке.
Причина, по которой вы можете использовать pop() для состояния, заключается в передаче вместо setState функции объекта. Функция передается предыдущее состояние в качестве аргумента, который может быть изменен, и заменяет объект неизменного состояния.

Редактировать: Я заметил, что вы также хотели идентификатор удаленной кнопки, поэтому я обновил приведенный выше пример кода для регистрации идентификатора удаленной кнопки.

...