在react-js中的insertAdjacentHTML中添加onclick或eventListener

Question

我正在构建一个用于学习目的的简单 React 应用程序，我刚开始学习 React-js，我试图在用户操作上添加段落 dynamically，它运行良好但我想添加一个 [= insertAdjacentHTML 中的 13=] 事件（基本上是 innerHTML）。

但是 onclick 事件在 innerHTML

中不起作用

app.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>
        )
    }
}

我想做什么？

用户将能够添加多个段落，我正在尝试在每个段落上添加一个删除按钮，以便用户可以删除特定段落

我也试过 eventListener 像 :-

const deleteParagraph = () => {
    document.querySelector('#delete').addEventListener("click", "#delete", 
    function(e) {
          e.preventDefault();
          document.querySelector(this).parent('div').remove();
        })
}

但是它说

deleteParagraph is not defined

我也尝试将 deleteParagraph 包装在 componentDidMount() 中，但它会删除 window 中的所有内容。

非常感谢任何帮助。谢谢。

Answer 1

insertAdjecentHTML 不应在 javascripts 框架中使用，因为它们在完全不同的范例上工作。每次更改组件状态时，都会重新渲染 React 组件。所以你想通过改变它的状态来操纵你的组件的外观

解决方法：在构造函数中初始化组件的状态，稍后您将在单击按钮时更改该状态。初始状态是空段落数组。

constructor() {
    super()
    this.state = {
      paragraphs:[]
    }
  }

并在单击按钮时更改该状态 - 如下所示：

<div onClick={addParagraph}>

添加段落功能

const addParagraph = () =>{
   this.state = this.state.push('New paragraph')
}

渲染段落

<div id="container">
this.state.paragraphs.map(paragraph =>{
   <p>{paragraph}</p>
})
</div>

2022 年 ReactJS 的额外提示 - 使用功能组件而不是 Class 组件

Answer 2

不要直接操作 DOM，让 React 处理 DOM 变化。这是正确实施它的一种方法。

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>
    );
  }
}

在react-js中的insertAdjacentHTML中添加onclick或eventListener

Add onclick or eventListener in insertAdjacentHTML in react-js

javascript

reactjs