Estoy creando una aplicación de reacción simple con fines de aprendizaje, acabo de comenzar a aprender reaccionar-js, estaba tratando de agregar un párrafo dynamically en la acción del usuario y funcionó perfectamente. Pero quiero agregar un evento onClick en insertAdjacentHTML (básicamente HTML interno).
Pero el evento onclick no funciona en innerHTML
aplicación.js
const addParagraph = () => { var paragraphSpace = document.getElementById('container') paragraphSpace.insertAdjacentHTML('beforeend', `<p>I am dynamically created paragraph for showing purpose<p> <span id="delete-para" onClick={deleteParagraph(this)}>Delete</span>` } const deleteParagraph = (e) => { document.querySelector(e).parent('div').remove(); } class App extends React.Component { render() { return ( <div> <div onClick={addParagraph}> Click here to Add Paragraph </div> <div id="container"></div> </div> ) } }¿Qué estoy tratando de hacer?
El usuario podrá agregar varios párrafos y estoy tratando de agregar un botón de eliminación en cada párrafo para que el usuario pueda eliminar un párrafo en particular
También probé con eventListener como: -
const deleteParagraph = () => { document.querySelector('#delete').addEventListener("click", "#delete", function(e) { e.preventDefault(); document.querySelector(this).parent('div').remove(); }) }pero dijo
deleteParagraph no está definido
También traté de envolver deleteParagraph en componentDidMount() Pero elimina todo de la ventana.
Cualquier ayuda sería muy apreciada. Gracias.
insertAdjecentHTML no debe usarse en marcos de JavaScript porque funcionan en un paradigma completamente diferente. Los componentes de React se vuelven a renderizar cada vez que cambia el estado de un componente. Entonces desea manipular el aspecto de su componente cambiando su estado
Solución: en el constructor, inicialice el estado de su componente, que cambiará más adelante al hacer clic en el botón. El estado inicial es una matriz de párrafos vacíos.
constructor() { super() this.state = { paragraphs:[] } }Y modifique ese estado al hacer clic en el botón, así:
<div onClick={addParagraph}>Agregar función de párrafo
const addParagraph = () =>{ this.state = this.state.push('New paragraph') }Representación de párrafos
<div id="container"> this.state.paragraphs.map(paragraph =>{ <p>{paragraph}</p> }) </div>Consejo adicional para ReactJS en 2022: use componentes funcionales en lugar de componentes de clase
No manipule el DOM directamente, deje que React maneje los cambios de DOM en su lugar. Aquí hay una forma de implementarlo correctamente.
class App extends React.Component { state = { paragraphs: [] }; addParagraph = () => { // do not mutate the state directly, make a clone const newParagraphs = this.state.paragraphs.slice(0); // and mutate the clone, add a new paragraph newParagraphs.push('I am dynamically created paragraph for showing purpose'); // then update the paragraphs in the state this.setState({ paragraphs: newParagraphs }); }; deleteParagraph = (index) => () => { // do not mutate the state directly, make a clone const newParagraphs = this.state.paragraphs.slice(0); // and mutate the clone, delete the current paragraph newParagraphs.splice(index, 1); // then update the paragraphs in the state this.setState({ paragraphs: newParagraphs }); }; render() { return ( <div> <div onClick={this.addParagraph}>Click here to Add Paragraph</div> <div id="container"> {this.state.paragraphs.map((paragraph, index) => ( <> <p>{paragraph}</p> <span onClick={this.deleteParagraph(index)}>Delete</span> </> ))} </div> </div> ); } }