添加甜警報彈出到按鈕陣營組件

Question

我發現這個完美的甜警報模塊引導並作出反應（我用我的流星應用程序，它）：

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

但我不明白如何將這些代碼包含在React組件中。

當有人在我的應用程序中單擊刪除按鈕時，我想要一個Sweet Alert提示來彈出詢問確認。

這裏是我的刪除按鈕組件：

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

這裏是我從甜警報例子複製的代碼：

<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> 

任何人都知道如何做到這一點？

Answer 1

工作例如基於代碼http://www.webpackbin.com/VJTK2XgQM

您應該使用this.setState()和onClick創建<SweetAlert ... />。您可以使用粗箭頭或.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> 
    ); 
    } 
}