#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 есть идеи, как я могу это исправить?