twitter-bootstrap 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41006087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Sweet Alert popup to button in React component
提问by Jordan England-Nelson
I found this perfect Sweet Alert module for Bootstrap and React (which I'm using in my Meteor app):
我为 Bootstrap 和 React 找到了这个完美的 Sweet Alert 模块（我在我的 Meteor 应用程序中使用了它）：
http://djorg83.github.io/react-bootstrap-sweetalert/
http://djorg83.github.io/react-bootstrap-sweetalert/
But I don't understand how you include this code inside a React component.
但我不明白你是如何在 React 组件中包含这段代码的。
When someone clicks the Delete button in my app, I'd like a Sweet Alert prompt to pop up asking for confirmation.
当有人点击我的应用程序中的删除按钮时，我希望弹出一个甜蜜警报提示，要求确认。
Here is my component for the Delete button:
这是我的删除按钮组件：
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>
)
}
}
And here is the code that I copied from the Sweet Alert example:
这是我从 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>
Anyone know how to do this?
有人知道怎么做吗？
回答by hinok
Working example based on your code http://www.webpackbin.com/VJTK2XgQM
基于您的代码的工作示例http://www.webpackbin.com/VJTK2XgQM
You should use this.setState()and create <SweetAlert ... />on onClick. You can use fat arrows or .bind()or any other method to be sure that proper context is used.
您应该使用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>
);
}
}
回答by Vickodev
if it doesn't work for someone the way you exposed the @hinok solution then you can modify this function like this:
如果它不适用于您公开@hinok 解决方案的方式，那么您可以像这样修改此函数：
deleteThisGoal() {
this.setState({
alert: ( <
SweetAlert success title = "Woot!"
onConfirm = {
() => this.hideAlert()
} >
Hello world!
<
/SweetAlert>
)
});
};
};
This was the code that I wrote:
这是我写的代码：
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"}
This was the called from button:
这是从按钮调用的：
{<Button color="primary" disabled={this.state.notChange} onClick={() => this.showAlert('Save changes for client', '?Are you sure?', () => this.updateCustomer, null) } >Save changes</Button>}
Saludos!!
致敬！！
