<Modal
title="修改菜单"
visible={isShowEdit}
onCancel={()=>{
this.setState({isShowEdit:false})
}}
footer={null}
>
<EditForm
menu={menu}
handleCancel={()=>{
this.setState({isShowEdit:false})
}}
/>
</Modal>
这里的Modal里面有一个叫EditForm的组件,并给EditForm的组件传入了menu属性。EditForm组件是一个Form表单,那么如何实现在EditForm的组件里面实现数据回显呢?
解决方法:在EditForm组件的componentDidMount阶段和componentDidUpdate阶段做数据回显
formRef = React.createRef();
componentDidMount(){
const {name,title} = this.props.permission
this.formRef.current.setFields([
{name:"name",value:name},
{name:"title",value:title},
]);
}
componentDidUpdate() {
const {name,title} = this.props.permission
this.formRef.current.setFields([
{name:"name",value:name},
{name:"title",value:title},
]);
}
render() {
const {permission} = this.props
const formItemLayout = {
labelCol: { span: 7 }, //左侧label的宽度
wrapperCol: { span: 15 },//右侧包裹的宽度
}
return (
<Form name="edit_form"
onFinish={this.onFinish}
ref={this.formRef}>
<Form.Item
{...formItemLayout}
name="title"
>
<Input ></Input>
</Form.Item>
<Form.Item
{...formItemLayout}
name="name"
>
<Input></Input>
</Form.Item>
</Form>
)
}