Блог

Главная - Вопросы по программированию - Сетка данных React, как я могу удалить строку?

Сетка данных React, как я могу удалить строку?

#reactjs

#reactjs

Вопрос:

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

https://codesandbox.io/s/5vy2q8owj4?from-embed

Я новичок в reactjs, возможно ли это сделать?

Что я думал сделать, так это добавить еще одну строку с кнопкой и внутри компонента, чтобы иметь такую функцию, я не знаю, как вызвать эту функцию извне:

 { key: "", name: "", formatter: () => <button onClick={() => 
this.deleteRows(title)}>Delete</button>}

deleteRows = (id) => {
    let rows = this.state.rows.slice()
    rows = rows.filter(row => row.id !== id)
    this.setState({ rows })
}

Спасибо

Комментарии:

1. Посмотрите на пример действий с ячейками adazzle .github.io/react-data-grid/docs/examples/cell-actions

2. Привет, Андри, я пробовал и не работает, что мне удалось сделать, так это добавить столбец: {ключ: «», имя: «», форматировщик: () => <кнопка onClick={() => это. deleteRows(заголовок)}> Удалить</button>} но не работает

3. Пожалуйста, отредактируйте свой вопрос, чтобы показать, что вы пробовали, и конкретно, что вы ожидаете, а что не работает. Ответ на единственный заданный вами вопрос «возможно ли это» — «да».

4. Я только что отредактировал свой вопрос: спасибо, Энди

Ответ №1:

Это возможно. Для достижения этой цели вы можете использовать getCellActions . Вот рабочий пример: https://codesandbox.io/s/5091lpolzk

Комментарии:

1. Спасибо, Рафаэль, у меня есть еще один вопрос, но я задам его в другой области вопросов .. поскольку это поможет другим решить эту проблему.

2. Рафаэль, я только что внес некоторые изменения, и мои строки не содержат index: 0, и идентификатор генерируется на основе аналогичного примера, как ваш метод splice не удаляет нужную строку, как я могу использовать splice без использования индекса строки?

3. данные строк [имя, город, номер, дополнительные] соединение не работает, можно ли выполнить соединение без использования индекса?

4. getCellActions это хороший совет. Однако в предоставленном вами примере есть несколько ошибок, связанных с тем, как индексы массива обрабатываются внутри. Например, вы не можете удалить последнюю строку, и по мере удаления строк маленькие стрелки начинают искажаться.

5. @NicoAndrade есть идеи, как я могу это исправить?