无法访问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;