as shown in the figure: when each record is clicked to edit, the form displays the corresponding record value. My practice is to click to edit the record to obtain the record and store it in state.formData. How to pass state.formData as a props parameter to the form component. The initial value of the form component is taken from the this.props.formData.
:inputform
:test
:
I printed the accepted props.formData parameter under the render function of form. There is no problem, it is the value passed by the record, but there is a problem when displaying it:
this is the code of the whole form
import React from "react";
import { Form , Input , Button } from "antd";
const FormItem = Form.Item;
const formItemLayout = {
labelCol : {span : 5},
wrapperCol : {span : 15}
};
class FormLayout extends React.Component{
handleSubmit(e){
e.preventDefault();
this.props.comfirmHandle(this.props.form.getFieldsValue()); //
}
// componentWillReceiveProps(nextProps){
// if(!nextProps.visible){
// this.props.form.resetFeilds();
// }
// }
render(){
const { getFieldDecorator ,getFeildsValue } = this.props.form;
const { record } = this.props;
return (
<Form onSubmit= {this.handleSubmit.bind(this)}>
<FormItem label="" {...formItemLayout}>
{getFieldDecorator("id", {
rules: [{ required: true, message: "!" }],
initialValue : record ? record.id : ""
})(
<Input placeholder=""/>
)}
</FormItem>
<FormItem label="" {...formItemLayout}>
{getFieldDecorator("name", {
rules: [{ required: true, message: "!" }],
initialValue : record ? record.name : ""
})(
<Input placeholder=""/>
)}
</FormItem>
<FormItem label="" {...formItemLayout}>
{getFieldDecorator("price", {
rules: [{ required: true, message: "!" }],
initialValue : record ? record.price : ""
})(
<Input placeholder=""/>
)}
</FormItem>
<FormItem label="" {...formItemLayout}>
{getFieldDecorator("owner_id", {
rules: [{ required: true, message: "!" }],
initialValue : record ? record.owner_id :""
})(
<Input placeholder=""/>
)}
</FormItem>
<FormItem wrapperCol={{ span: 10, offset: 10 }}>
<Button type="primary" htmlType="submit">
</Button>
</FormItem>
</Form>
);
}
}
export default FormLayout = Form.create()(FormLayout);