problem description
using the Model (pop-up window) component of antd in the React project, official document says: onCancel is a callback that clicks on the mask layer or the upper-right cross or cancel button, implying that if you need to turn off Modal in these actions, set the state that controls whether the Modal is visible to false in this event. In fact, I did the same.
the environmental background of the problems and what methods you have tried
I have checked to see if there is a spelling problem, which can rule out
. In addition, I also use the view layer method bind (this) in the constructor, and context has no problem.
about whether the method is called? Called, but the attempt to change the value of state in onCancel failed, so the Modal was not closed, why would it fail?
related codes
import { Modal } from "antd"
class CustomButton extends React.Component {
constructor(props) {
super(props)
this.state = {
popupVisible: true,
wording: "123",
}
this.showCustomPopup = this.showCustomPopup.bind(this)
this.handleCancel = this.handleCancel.bind(this)
}
showCustomPopup() {
this.setState({ popupVisible: true })
}
handleCancel() {
this.setState({
popupVisible: false,
wording: "666"
})
console.log(`visible in state: ${this.state.popupVisible}`)
}
render() {
return (
<div className="container" onClick={this.showCustomPopup}>
<span>
<Modal
visible={this.state.popupVisible}
onCancel={this.handleCancel}
>
{this.state.wording}
</Modal>
</span>
</div>
)
}
}