Пишу приложение на React, которое-по API принимает данные для таблицы и выводит их. Среди прочего функционала, в заглавных ячейках колонок(столбцов ) должна быть кнопка для удаления этого самого столбца.
Столкнулся со следующей проблемой: событие onClick не срабатывает внутри ячейки, но срабатывает вне таблицы. Что делаю не так, и как заставить кнопку внутри th - отзываться ?
import React from 'react';
import './App.css';
function App() {
const [items, setItems] = React.useState([]);
React.useEffect(() => {
fetch('https://example.com/')
.then((resp) => resp.json())
.then(json => {
setItems(json.data)
})
}, []);
const addItem = () => {
let list = document.querySelector('.items')
let key;
for (key in items) {
list.innerHTML += `
<tr>
<td>${items[key].id}</td>
<td>${items[key].year}</td>
</tr>
`
}
}
addItem();
const del = () => {
console.log('test')
}
return (
<div className="mainContainer">
<span className="tableHeader">
<h1 onClick={del}>Pantone Colors</h1>
//Эта кнопка работает правильно
<p>Reset</p>
</span>
<table className="table">
<tbody className='items'>
<tr >
<th><input type="checkbox" defaultChecked />id</th>
<th><input type="checkbox" defaultChecked />year <button onClick={del}>Delete</button> </th>
//Эта кнопка не работает
</tr>
</tbody>
</table>
</div >
);
}
export default App;
<button>
как-то скрыли от событий стилями (типаz-index: -1
илиpointer-events: none
). попробуйте вместоonClick
поставитьonMouseOver
на нерабочий<button>
и скажите результатgetResponce()
, тоonClick
нормально работает на нерабочем<button>
?