IT技术 - 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮 - 吾爱随笔录

将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

IT技术 javascript twitter-bootstrap reactjs sweetalert

2021-05-24 06:25:23

我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert module（我在我的 Meteor 应用程序中使用了它）：

http://djorg83.github.io/react-bootstrap-sweetalert/

但我不明白你是如何在 React 组件中包含这段代码的。

当有人点击我的应用程序中的删除按钮时，我希望弹出一个甜蜜警报提示，要求确认。

这是我的删除按钮组件：

import React, {Component} from 'react';
import Goals from '/imports/collections/goals/goals.js'
import SweetAlert from 'react-bootstrap-sweetalert';

export default class DeleteGoalButton extends Component {

  deleteThisGoal(){
    console.log('Goal deleted!');
    // Meteor.call('goals.remove', this.props.goalId);
  }

  render(){
    return(
      <div className="inline">
          <a onClick={this.deleteThisGoal()} href={`/students/${this.props.studentId}/}`}
          className='btn btn-danger'><i className="fa fa-trash" aria-hidden="true"></i> Delete Goal</a>
      </div>
    )
  }
}

这是我从 Sweet Alert 示例中复制的代码：

<SweetAlert
    warning
    showCancel
    confirmBtnText="Yes, delete it!"
    confirmBtnBsStyle="danger"
    cancelBtnBsStyle="default"
    title="Are you sure?"
    onConfirm={this.deleteFile}
    onCancel={this.cancelDelete}
>
    You will not be able to recover this imaginary file!
</SweetAlert>

有人知道怎么做吗？

2个回答

基于您的代码http://www.webpackbin.com/VJTK2XgQM 的工作示例

您应该使用this.setState()和创建<SweetAlert ... />上onClick。您可以使用粗箭头或.bind()任何其他方法来确保使用正确的上下文。

import React, {Component} from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';

export default class HelloWorld extends Component {

  constructor(props) {
    super(props);

    this.state = {
      alert: null
    };
  } 

  deleteThisGoal() {
    const getAlert = () => (
      <SweetAlert 
        success 
        title="Woot!" 
        onConfirm={() => this.hideAlert()}
      >
        Hello world!
      </SweetAlert>
    );

    this.setState({
      alert: getAlert()
    });
  }

  hideAlert() {
    console.log('Hiding alert...');
    this.setState({
      alert: null
    });
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
          <a 
            onClick={() => this.deleteThisGoal()}
            className='btn btn-danger'
          >
            <i className="fa fa-trash" aria-hidden="true"></i> Delete Goal
        </a>
        {this.state.alert}
      </div>
    );
  }
}

如果它不适用于您公开@hinok 解决方案的方式，那么您可以像这样修改此函数：

deleteThisGoal() {    
this.setState({
    alert: ( <
        SweetAlert success title = "Woot!"
        onConfirm = {
            () => this.hideAlert()
        } >
        Hello world!
        <
        /SweetAlert>
    )
});

};

这是我写的代码：

showAlert(title, message, callBack, style) {
    this.setState({
        alert: (
            <SweetAlert 
                warning
                showCancel
                confirmBtnText = "Sí"
                cancelBtnText = "No"
                confirmBtnBsStyle= {style ? style : "warning"}
                cancelBtnBsStyle = "default"
                customIcon = "thumbs-up.jpg"
                title = {title}
                onConfirm = {callBack()}
                onCancel = {this.hideAlert}
            >
                {message}
            </SweetAlert>
        )            
    });
}

hideAlert = () => {
    this.setState({
        alert: null
    });
}

updateCustomer = () => {..."a few lines of code here"}

这是从按钮调用的：

{<Button color="primary" disabled={this.state.notChange} onClick={() => this.showAlert('Save changes for client', '¿Are you sure?', () => this.updateCustomer, null) } >Save changes</Button>}

致敬！！

其它你可能感兴趣的问题

上一篇redux - 如何存储和更新键/值对下一篇皮带传动轴问题