javascript - 当我多次单击添加按钮时，它应该显示我在这里 div 多次删除按钮

Question

• 我正在尝试构建一个简单的用户界面，以便我可以学习反应。
• 现在，当我单击添加按钮时，它将显示我在这里 div 和删除按钮
• 当我多次单击添加按钮时，它应该多次显示我在这里带有删除按钮的 div。
• 所以我研究并发现了这个例子https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html
• 使用这个例子，我实现了 appendData 方法，但它仍然没有多次添加 div。
• 在我的控制台中，我可以看到添加了多少次 divconsole.log("this.displayData---->", this.displayData);
• 你能告诉我如何解决它。
• 所以将来我会自己修复它

https://stackblitz.com/edit/react-b2d3rb?file=demo.js

 onClick = () => {
    this.setState({ showResults: true });
    this.setState({ showOrHideSearch: true });
    this.displayData.push(
      <div style={{ display: this.state.showOrHideSearch ? "" : "none" }}>
        {" "}
        I am here
        <input
          ref="rbc-toolbar-label"
          type="submit"
          value="Delete"
          onClick={this.onDelete}
        />
      </div>
    );

    console.log("this.displayData---->", this.displayData);

    this.setState({ showdata: this.displayData });
  };

标签： javascripthtmlcssreactjsredux

Answer 1

第一件事是你不应该多次使用 this.setState ，而应该在一行中使用它们。而不是将数据推送到类变量中，您应该将该数据设置到您的状态变量和您应该在渲染函数中使用的相同变量中。如果你能分享你的完整代码会很好..