如何使用react js在右上角制作带有关闭图标的按钮答案

【问题标题】：how to make button with close icon in right corner using react js如何使用react js在右上角制作带有关闭图标的按钮
【发布时间】：2021-04-24 01:38:50
【问题描述】：

在 reactjs 如何使用 react js 在右上角制作带有关闭图标的按钮。在我下面的代码中，当我运行页面时，我想在右上角制作带有关闭图标的按钮。当我单击十字图标时，按钮被关闭。

我们怎样才能做到这一点。任何人请帮帮我。我坚持这一点。非常感谢。

我们如何做到这一点

在我的代码中检查这里。在这里我想用右上角制作十字图标 https://codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js

import React from "react";
import ReactDOM from "react-dom";

// import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <button
          className="btn btn-danger"
          // onClick={() => {
          //   if (window.confirm("Delete the item?")) {
          //     let removeToCollection = this.removeToCollection.bind(this, 121);
          //     removeToCollection();
          //   }
          // }}
        >
          Warning Meaasge with close option
        </button>
      </div>
    );
  }

  removeToCollection(key, e) {
    console.log(key);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【问题讨论】：

任何人请帮帮我。非常感谢我坚持这一点
你使用的只是 js 库文件的引导反应模块吗？
是的，我们可以使用引导 npm 包
我们如何制作我发布的图像类型有没有使用 reactjs 的任何想法，你可以在这里查看我的代码codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js
codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js 在我的代码中我只想添加十字图标

标签： javascript html reactjs bootstrap-4

【解决方案1】：

创建了一个自定义的Modal 组件并将其注入到App 组件中。

Stackblitz - https://stackblitz.com/edit/reactjs-example1-yz2mez?file=index.js

注意：- 如果需要，您可以使用引导结构替换 html 标记。如果要在关闭后打开对话框，可以取消注释根组件中的p 标签。

【讨论】：

【解决方案2】：

您可以相应地创建一个 div 和样式，如果您想在 onClick 上执行特定功能，那么您可以使用 event.target.id 。我已经使用状态来显示和隐藏按钮。

示例代码 - https://codesandbox.io/s/close-icon-at-top-5czwf?file=/src/index.js

【讨论】：

这是一个被低估的答案！