我有一個React.Component狀態modalVisible可以打開一個模態：
<Modal
visible={this.state.modalVisible}
>
<FormStructure
record={this.state.selectedRecord}
question={this.state.question}
dropdownItems={this.state.dropdownItems}
/>
</Modal>
Modal打開后React.FC <FormStrucutre ... />呈現出來，問題是我不知道如何更改modalVisible里面的狀態值React.FC：
const Submit = () => {
fetch('api/Call/Save', {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({
'No': form.getFieldValue('no')
})
})
.then(() => this.setState({modalVisible: false}); //TS2532 (TS) Object is possibly 'undefined'.
};
uj5u.com熱心網友回復：
您必須將 closeModal 方法傳遞給 React.FC <FormStructure />
// class component
<Modal
visible={this.state.modalVisible}
>
<FormStructure
record={this.state.selectedRecord}
question={this.state.question}
dropdownItems={this.state.dropdownItems}
closeModal={() => this.setState({modalVisible: false})}
/>
</Modal>
使用 FormStructure 中的道具
// FormStructure.tsx
const FormStructure = (props: any) => {
const {record, question, dropdownItems, closeModal} = props;
const onSubmit = () => {
....
closeModal();
}
}
uj5u.com熱心網友回復：
一個常見的模式是將回呼作為 props 傳入，當事件發生時子組件呼叫回呼。在這種情況下，您可以公開一個onSave道具：
// parent
<Modal
visible={this.state.modalVisible}
>
<FormStructure
record={this.state.selectedRecord}
question={this.state.question}
dropdownItems={this.state.dropdownItems}
onSave={() => this.setState({modalVisible: false})}
/>
</Modal>
// child
class FormStructure extends React.Component {
const Submit = () => {
fetch('api/Call/Save', {
// ...
})
.then(() => this.props.onSave();
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390794.html
標籤：javascript 反应 打字稿
上一篇：如何使回傳型別以可選引數為條件