form的create,里面两个form,同时子组建还有form,提交怎么破?

来源:11-1 项目初始化

苹果123

2018-07-14

const data = [];
for (let i = 0; i < 10; i++) {
data.push({
key: i.toString(),
installment: `Edrward ${i}`,
interestRate: 32,
});
}
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);



@connect(({productManage, loading}) => ({
productManage,
submitting: loading.effects['productManage/stagesProductCreateInit','productManage/stagesProductInfoCreate'],
}))

class AddProduct extends React.PureComponent {
constructor(props){
super(props);
this.state={
isShow:'none',
productType:false,
officeList:[],
productStatusList:[],
productTypeList:[],
interestTypeList:[],
feeCollectionWayList:[],
isPutStatusList:[],
isOrderExamineList:[],
}
}

componentDidMount(){
MixinAjax.getPost(this.props.dispatch,'productManage/stagesProductCreateInit',{},'stagesProductCreateInit',()=>{
console.log(1,this.props);
const {productManage}=this.props;
const {stagesProductCreateInit}=this.props.productManage;
const {stagesProductCreateInit:{officeList,productTypeList,interestTypeList,feeCollectionWayList,isPutStatusList,isOrderExamineList,productStatusList}}=this.props.productManage;
if(stagesProductCreateInit.respCode==='0000'){
MixinAjax.loopAgain(isPutStatusList,"putStatusCode","putStatusName");
MixinAjax.loopAgain(feeCollectionWayList,"wayCode","wayCode");
MixinAjax.loopAgain(isOrderExamineList,"orderExamineCode","orderExamineName");
MixinAjax.loopAgain(officeList,"officeNo","officeName");
MixinAjax.loopAgain(productTypeList,"productTypeCode","productTypeName");
MixinAjax.loopAgain(productStatusList,"productStatusCode","productStatusName");
MixinAjax.loopAgain(interestTypeList,"interestTypeCode","interestTypeName");
this.setState({
officeList,productTypeList,interestTypeList,feeCollectionWayList,isPutStatusList,isOrderExamineList,productStatusList
})
};
});

}

onTabClick = (e) => {
if(e==='4000'){
this.setState({
productType:'4000'
})
}else{
this.setState({
productType:'4001'
})
}
}

handleSubmit = (e) => {
e.preventDefault();
if(this.state.productType===false){
console.log('不虚拟')
this.props.form.validateFields((err, fieldsValue) => {
fieldsValue['officeName']=fieldsValue['officeName']['label'];
}
if(!err){
const values = {
...fieldsValue,
'validDate': fieldsValue['validDate'].format('YYYY-MM-DD'),
};
console.log('Received values of form: ', values);
MixinAjax.getPost(this.props.dispatch,'productManage/updateProduct',{...values},'updateProduct',()=>{
console.log(this.props);
const {productManage}=this.props;
const {updateProduct}=this.props.productManage;
if(updateProduct.respCode==='0000'){
message.success(updateProduct.respMsg, 1,()=>{
this.props.dispatch(
routerRedux.push('/DeployManage/productManage')
);
});
}
})
}
});
}else{

this.props.form.validateFields((err, fieldsValue) => {
console.log('虚拟',fieldsValue);
if(!err){
// if(fieldsValue['officeName']['key'] && fieldsValue['officeName']['label']){
// fieldsValue['officeNo']=fieldsValue['officeName']['key'];
// fieldsValue['officeName']=fieldsValue['officeName']['label'];
// }
const values = {
...fieldsValue,
'validDate': fieldsValue['validDate'].format('YYYY-MM-DD'),
};
MixinAjax.getPost(this.props.dispatch,'productManage/creditProductInfoCreate',{...values},'creditProductInfoCreate',()=>{
const {productManage}=this.props;
const {creditProductInfoCreate}=this.props.productManage;
if(creditProductInfoCreate.respCode==='0000'){
message.success(creditProductInfoCreate.respMsg, 1,()=>{
this.props.dispatch(
routerRedux.push('/DeployManage/productManage')
);
});
}
})
}
});
}

render() {
const {productManage:{productInfo},submitting} = this.props;
const {feeCollectionWayList,interestTypeList,isCompoundList,isFreeInterestList,isOrderExamineList,isPutStatusList,productStatusList,}=this.state;
const {getFieldDecorator} = this.props.form;
const {productManage:{stagesProductCreateInit}}=this.props;
const dateFormat = 'YYYY-MM-DD';

return (
<div style={{background: '#fff'}} >
<PageHeaderLayout title = '新增产品'>
<Tabs defaultActiveKey='4001' onTabClick={this.onTabClick}>
<TabPane tab="分期产品" key="4001">
<Form style={{overflow: 'hidden'}} onSubmit={this.handleSubmit}>
<div style={{overflow: 'hidden'}}>
<div style={{overflow: 'hidden'}}>
<div style={{float: 'left',width: "50%"}}>
<FormItem
{...formItemLayout}
label="产品编号"
hasFeedback
>
{getFieldDecorator('productCode', {
rules: [{required: true, message: '请输入产品编号'}],
})(
<Input placeholder="请输入产品编号" style={{marginLeft:'2%'}}/>
)}
</FormItem>

<FormItem
{...formItemLayout}
label="产品状态"
style={{display:this.state.isShow}}
>
{getFieldDecorator('status', {
rules: [{required: true, message: '请输入产品状态'}],
})(
<Select
style={{width:200}}
placeholder="请选择产品状态"
>
{MixinAjax.loopAgainAgain(this.state.productStatusList)}
</Select>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="逾期宽限天数(天)"
>
{getFieldDecorator('allowOverdueDay', {
rules: [{required: false,message:"请输入逾期宽限天数"}],
})(
<Input placeholder="请输入逾期宽限天数"/>
)}
</FormItem>

<FormItem
{...formItemLayout}
label="额度有限天数(天)"
>
{getFieldDecorator('amountValidDay', {
rules: [{required: true,message:'请输入额度有限天数'}],
})(
<Input placeholder="请输入额度有限天数"/>
)}
</FormItem>

<FormItem
{...formItemLayout}
label="产品截至有效日期"
>
{getFieldDecorator('validDate', {
rules: [{type: 'object',required: true,message: "请选择产品截至有效日期"}],
})(
<DatePicker style={{ width: '100%' }} />
)}
</FormItem>
</div>
<div style={{float:'right',width: "50%"}}>
<FormItem
{...formItemLayout}
label="产品名称"
hasFeedback
>
{getFieldDecorator('productName', {
rules: [{required: true, message: '请输入产品名称'}],
})(
<Input placeholder="请输入产品名称" />
)}
</FormItem>

<FormItem
{...formItemLayout}
label="产品类型"
hasFeedback
>
{getFieldDecorator('productType', {
rules: [{required: true, message: '请选择产品类型'}],
})(
<Select
placeholder="请选择产品类型"
>
{MixinAjax.loopAgainAgain(this.state.productTypeList)}
</Select>
)}
</FormItem>


</div>
</div>
<EditableTable />
<FormItem style={{marginTop: 30,textAlign:"center"}}>
<Button type="primary" style={{marginRight:10}} htmlType="submit">保存</Button>
</FormItem>
</div>
</Form>
</TabPane>
<TabPane tab="虚拟信用卡定义" key="4000">
<Form onSubmit={this.handleSubmit}>
<div style={{overflow: 'hidden'}}>
<div style={{overflow: 'hidden'}}>
<div style={{float: 'left',width: "50%"}}>
<FormItem
{...formItemLayout}
label="产品编号"
hasFeedback
>
{getFieldDecorator('productCode', {
rules: [{required: true, message: '请输入产品编号'}],
})(
<Input placeholder="请输入产品编号" />
)}
</FormItem>

<FormItem
{...formItemLayout}
label="产品截至有效日期"
>
{getFieldDecorator('validDate', {
rules: [{type: 'object',required: true,message: "请选择产品截至有效日期"}],
})(
<DatePicker style={{ width: '100%' }} />
)}
</FormItem>
</div>
</div>
<FormItem style={{marginTop: 30,textAlign:"center"}}>
<Button type="primary" htmlType="submit" style={{marginRight:10}}>保存</Button>
</FormItem>
</div>
</Form>
</TabPane>
</Tabs>
</PageHeaderLayout>
</div>
)
}
}

写回答

1回答

Parry

2018-07-15

子组件应该也是 create 生成。提交的话直接用 antd 获取表单值。

是报错了吗?

0
1
苹果123
没报错,我后来换了方法
2018-07-21
共1条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程