如何解决无法访问Ant Modal中的this.setState或this.state确认确定/取消功能
我在onCancel / onOk函数中访问this.state
和this.setState
时遇到问题。我想在确认后修改状态或取消弹出模式。如果有人采用其他方法,那么您的指导会有所帮助。
import React from 'react';
import { Button,Modal } from 'antd';
class ExampleClass extends React.Component {
constructor() {
super();
this.state = {
bankInfo: 100,};
}
onButtonClicked() {
this.setState({ bankInfo: 200 }); // works fine
Modal.confirm({
title: 'Are you sure delete this item?',okType: 'danger',onOk() {
this.setState({ bankInfo: 300 }); // Uncaught TypeError: Cannot read property 'setState' of undefined
},onCancel() {
this.setState({ bankInfo: 400 }); // Uncaught TypeError: Cannot read property 'setState' of undefined
},});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked.bind(this)}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;
解决方法
我希望使用箭头功能
import React from 'react';
import { Button,Modal } from 'antd';
class ExampleClass extends React.Component {
constructor() {
super();
this.state = {
bankInfo: 100,};
}
onButtonClicked = () => {
this.setState({ bankInfo: 200 });
Modal.confirm({
title: 'Are you sure delete this item?',okType: 'danger',onOk: () => {
this.setState({ bankInfo: 300 });
},onCancel: () => {
this.setState({ bankInfo: 400 });
},});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;
,
您需要将您的方法绑定到该类。
import React from 'react';
import { Button,};
}
onOkHandler = () => {this.setState({ bankInfo: 300 })}
onCancelHandler = () => {this.setState({ bankInfo: 400 })}
onButtonClicked() {
this.setState({ bankInfo: 200 }); // works fine
Modal.confirm({
title: 'Are you sure delete this item?',onOk() {
this.onOkHandler()
},onCancel() {
this.onCancelHandler()
},});
}
render() {
return (
<div>
<Button onClick={this.onButtonClicked.bind(this)}>Click Me</Button>
</div>
);
}
}
export default ExampleClass;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。