我在我的项目中使用react-js。
const SweetAlert = require('react-sweetalert2');
const Updater = React.createClass({
<div style={{ padding: "20px" }}>
<a onClick={() => this.deleteThisGoal()} className="btn btn-danger"> <i className="fa fa-trash" aria-hidden="true" />
Delete Goal
</a>
{this.state.alert}
</div>
deleteThisGoal: function() {
const getAlert = (
<SweetAlert success title="Woot!">
Hello world!
</SweetAlert>
);
this.setState({
alert: getAlert
});
}
});
当我检查元素时,值被分配给this.state.alert
但是当我点击警报时没有显示弹出窗口。
谁能指出我正确的方向?
我引用Add Sweet Alert popup to button in React component作为例子。
更新了我的回答:
const SweetAlert = require('react-sweetalert2');
const Updater = React.createClass({
render(
<div>
<div style={{ padding: '20px' }}> <a onClick={this.deleteThisGoal} className='btn btn-danger' > Delete Goal </a>
</div>
{this.popup}
</div>
);
},
deleteThisGoal: function() {
this.setState({
show: true
});
},
popup: function(keyword) {
return (
<SweetAlert
show={this.state.show} title="Deleted goal" text="Goal was deleted!"
onConfirm={() => this.setState({ show: false })}>
</SweetAlert>
);
}
});
仍然没有我能看到的警报。
我用const SweetAlert = require('react-sweetalert2').default;
解决了这个问题