У меня есть 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
не определено.
Как мне это сделать?
Проблема здесь
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();
})
Этот ответ хорошо это объясняет.
конечно, но мне нужно еще 6 минут :-) я не могу принять я думаю с менее чем 10 или видел
@Dejell, извини за это;)
Возможный дубликат Как получить доступ к правильному `this` внутри обратного вызова?