最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to make button with close icon in right corner using react js - Stack Overflow

programmeradmin1浏览0评论

in reactjs how to make button with close icon in right corner using react js. in my below code when i run the page i want to make button with close icon in right corner.when i click cross icon then button is closed.

How can we do that.anyone please help me out.i am stuck on that.its very thankful.

how can we do that this type button which i have posted i want to make this type when i run the page using reactjs .anyone know about that using reactjs

check here in my code.in here i wan to make cross icon with right corner =/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);

in reactjs how to make button with close icon in right corner using react js. in my below code when i run the page i want to make button with close icon in right corner.when i click cross icon then button is closed.

How can we do that.anyone please help me out.i am stuck on that.its very thankful.

how can we do that this type button which i have posted i want to make this type when i run the page using reactjs .anyone know about that using reactjs

check here in my code.in here i wan to make cross icon with right corner 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);
Share Improve this question asked Apr 23, 2021 at 15:04 snehasneha 3332 gold badges6 silver badges18 bronze badges 14
  • Anyone plz help me out . its very thankful i am stuck on that – sneha Commented Apr 23, 2021 at 15:05
  • Are you using bootstrap react module of just js library file? – Zam Abdul Vahid Commented Apr 23, 2021 at 15:14
  • yes we can use bootstrap npm packages – sneha Commented Apr 23, 2021 at 15:15
  • how can we make this type which i have posted image is there any idea using reactjs can u plz check here n my code codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js – sneha Commented Apr 23, 2021 at 15:16
  • codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js in here my code i want to add only cross icon – sneha Commented Apr 23, 2021 at 15:17
 |  Show 9 more ments

2 Answers 2

Reset to default 2

Created a custom Modal ponent and injected it in App ponent.

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

Note:- You can replace the html mark up using bootstrap structure if you need to. If you want to open the dialog once closed, you can unment the p tag i the root ponent.

You can create a div and style accordingly, if you want to perform a specific function on onClick, then you can use event.target.id . I have used the state to show and hide button.

Sample Code - https://codesandbox.io/s/close-icon-at-top-5czwf?file=/src/index.js

发布评论

评论列表(0)

  1. 暂无评论