Закрыть ReactModal из ReactComponent

Question

У меня есть React.Component внутри ReactModal.

class Course extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalOpen: false,
    }
  }
  handleModalOpen = event => {
    this.setState({ isModalOpen: true })
  }

  handleModalClose = event => {
    this.setState({ isModalOpen: false })
  }

  render() {
     <ReactModal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.handleModalClose}
          contentLabel="Purchase a Course"
          style={customStyles}>
        <CheckoutComponent handleClose={this.handleModalClose}/>
     </ReactModal>

   class CheckoutForm extends React.Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (ev) => {
       axios.post(`${process.env.API_URL}purchase`, charge)
          .then(function (response) {
              this.props.handleClose();
          }
  }

Я хотел бы закрыть модал реакции при успешной публикации запроса http.

Однако this не определено.

Как я могу это сделать?

Answer 1

Проблема здесь

axios.post(`${process.env.API_URL}purchase`, charge)
          // here
    .then(function (response) {
        this.props.handleClose();
    })

Вам необходимо использовать функции стрелок. При нормальных функциях this будет анонимной функцией this. Использование стрелочных функций решит эту проблему, и вы получите компонент this.

axios.post(`${process.env.API_URL}purchase`, charge)
          // arrow function
    .then(response => {
        this.props.handleClose();
    })

Этот ответ объяснить это хорошо.