如何在react.js上重置模态

Question

我的网页上有一些模态。当用户单击按钮时，模式打开。但是模态上有一些输入区域，我想在用户单击关闭部分时清除它们。关闭部分不是按钮，而是一个标志。当用户再次打开模态时，他/她会看到旧的输入。不应该是那样的。如何解决此问题？

const AddCampaignModal = (props) => {
return (
<div>
<Modal
visible={props.visible}
title="Add new campaign"
onClose={props.onClose}
size="medium"
>
<AddCampaignForm 
i18n={props.i18n} 
onClose={props.onClose}/>
</Modal>
</div>
)
}
export default AddCampaignModal

Answer 1

如果输入的数据在您的组件中，您可以尝试这样的操作：在closeModal中，可以设置组件的初始状态

const initialState = { name: null,//add your data// }
closeModal = () => {
this.setState({ 
...initialState,
modalIsOpen: false 
});
}

---

但是，如果输入的状态来自Parent，则需要一个新方法来重置父组件的数据，该数据可以作为回调添加到同一方法中。

const initialState = {name: null,//add your data// }
closeModal = () => {
this.setState({ 
modalIsOpen: false 
}, () => {
this.props.resetInputData();
});
}