Estou tentando criar uma img
com o Evento de onClick
no React
mas está imprimindo o código dessa forma na Web.
Meu codigo inner está assim:
coluna4.innerHTML = `<img onClick={() => this.apagar(${key})} class='ml-6' width='30' height='30' src='https://cdn.icon-icons.com/icons2/1489/PNG/128/rubbishbin_102620.png' alt='Excluir' title='Excluir' />`
Minha função que recebe parâmetro:
apagar = (key) => {
console.log(key)
}
Exemplo Código Completo
export default class Product extends Component {
state = {
produtos: [],
}
componentDidMount() {
for (var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i)
var session = sessionStorage.getItem(key);
var split = session.split('-');
var tabela = document.getElementById('tb-cart');
var linha = tabela.insertRow(-1);
//Adiciona dua coluna na linha criada <td></td> <td></td>
var coluna1 = linha.insertCell(0);
var coluna2 = linha.insertCell(1);
var coluna3 = linha.insertCell(2);
var coluna4 = linha.insertCell(3);
//Inclui o valor do campo do formulário em sua respectiva coluna
coluna1.innerHTML = split[1];
coluna2.innerHTML = split[0];
coluna3.innerHTML = split[2];
coluna4.innerHTML = `<img onClick={() => this.apagar(${key})} class='ml-6' width='30' height='30' src='https://cdn.icon-icons.com/icons2/1489/PNG/128/rubbishbin_102620.png' alt='Excluir' title='Excluir' />`
}
}
inserirCarrinho = async (id) => {
const response = await api.get(`/livros/listar/${id}`)
sessionStorage.setItem(id, response.data.descricao + "-" + response.data.nome + "-" + response.data.valor)
}
apagar = (key) => {
console.log(key)
}
render() {
return (
<div>
<Header />
<Table id="tb-cart" className="container" striped bordered hover>
<thead class="thead-dark">
<tr>
<th>Nome livro</th>
<th>Descrição</th>
<th>Valor</th>
<th></th>
</tr>
</thead>
</Table>
</div >
)
}
}
coluna4.innerHTML
já tem comandos errados logo de cara se percebe que você deve ta iniciando, tem que ser feito com os comandos doReact
, gostaria de ajudar, mas, como não sei todo o seu código fica complicado.componentDidMount()
se tem que fazer isso com comando doReact
, precisa aprender a maneira correta ... entendeu o problema?componentDidMount()
não e do React?React
precisa controlar os estados desse componente.