2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 3
|
|
|
|
title: 条件触发
|
|
|
|
---
|
2015-12-04 14:58:19 +08:00
|
|
|
|
|
|
|
可以判断是否需要弹出。
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
import { Popconfirm, Switch, message } from 'antd';
|
|
|
|
|
|
|
|
let App = React.createClass({
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
visible: false,
|
|
|
|
condition: true, // 是否满足条件,不满足则弹出确认框
|
|
|
|
};
|
|
|
|
},
|
|
|
|
changeCondition(value) {
|
|
|
|
this.setState({ condition: value });
|
|
|
|
},
|
|
|
|
confirm() {
|
|
|
|
this.setState({ visible: false });
|
|
|
|
message.success('进行下一步操作. next step.');
|
|
|
|
},
|
|
|
|
cancel() {
|
|
|
|
this.setState({ visible: false });
|
|
|
|
message.error('点击了取消');
|
|
|
|
},
|
|
|
|
handleVisibleChange(visible) {
|
|
|
|
if (!visible) {
|
|
|
|
this.setState({ visible });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// 打开前进行判断
|
|
|
|
console.log(this.state.condition);
|
|
|
|
if (this.state.condition) {
|
|
|
|
this.confirm(); // 直接执行下一步
|
|
|
|
} else {
|
|
|
|
this.setState({ visible }); // 进行确认
|
|
|
|
}
|
|
|
|
},
|
|
|
|
render() {
|
2016-01-07 16:29:12 +08:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Popconfirm title="确定要删除这个任务吗?"
|
2016-01-08 14:41:05 +08:00
|
|
|
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
|
|
|
|
onConfirm={this.confirm} onCancel={this.cancel}>
|
2016-01-07 16:29:12 +08:00
|
|
|
<a href="#">删除某任务</a>
|
|
|
|
</Popconfirm>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
点击是否直接执行:<Switch defaultChecked onChange={this.changeCondition} />
|
|
|
|
</div>
|
|
|
|
);
|
2016-05-11 09:32:33 +08:00
|
|
|
},
|
2015-12-04 14:58:19 +08:00
|
|
|
});
|
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
ReactDOM.render(<App />, mountNode);
|
2015-12-04 14:58:19 +08:00
|
|
|
````
|