表单修改后提交getValues不行，被替换了

来源：16-4 个人收藏文章列表开发（上）

苹果123

2018-06-04

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
我一改变你看数组里第一个对象===》》》
[true, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]，第一个直接变成true了，

写回答

5回答

苹果123

提问者

2018-06-06

import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import MixinAjax from '../../common/mixinsAjax';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {
Button,
Checkbox,
DatePicker,
Divider,
Form,
Input,
Link,
Modal,
Popconfirm,
Select,
Table,
Transfer
} from 'antd';

/*

################################### Create ################################

# File : MessageDeploy.js (配置管理/短信配置)
# Project : Ant-Design
# Created : 2018-04-27
# DevTeam : Wireless Development Team
# Author : jiangmeiyuan
# Version : 1.0.0

################################### Modify #################################

# Author : victor
# Version : 1.0.0
# Notes : 调整页面

##############################################################################

*/

const CheckboxGroup = Checkbox.Group;
const { RangePicker, MonthPicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
};
let dataMsm = '';
let dataMsm1 = '';
let plainOptionsChecked = [];
let vals = '';
const plainOptions = [ '1天', '2天', '3天', '5天', '10天', '20天' ];

const options = [
{ label: '5天', value: 'Five' },
{ label: '4天', value: 'Four' },
{ label: '3天', value: 'Three' },
{ label: '2天', value: 'Two' },
{ label: '1天', value: 'One' },
{ label: '0天', value: 'Zero' }
];

const plainOptions1 = [ '每天', '1天', '2天', '3天', '5天', '10天', '20天' ];
const options1 = [
{ label: '每天', value: 'Every' },
{ label: '1', value: 'OneDay' },
{ label: '2', value: 'TwoDay' },
{ label: '3', value: 'ThreeDay' },
{ label: '5', value: 'FiveDay' },
{ label: '10', value: 'TenDay' },
{ label: '20', value: 'TwentyDay' }
];

@connect(({ MessageManage, loading }) => ({
MessageManage,
submitting: loading.effects['MessageManage/smsTemplateListQuery']
}))
class MessageDeploy extends React.PureComponent {
componentWillMount() {
this.getList('smsTemplateListQuery');
this.getList('smsConfigListQuery');
}

constructor(props) {
super(props);

this.state = {
isChoosed: '',
smsConfigModels: []
};
}

handleCurrencyChange = (e) => {
console.log(e);

// const { form } = this.props;
// let formValues = this.props.form.getFieldsValue().smsConfigModels;
// console.log(formValues,i,this)
// let items = formValues[i];
// this.setState = {
// isChoosed: formValues,
// };
// this.triggerChange( {isChoosed:items});
// console.log(this.state);
// formValues.push({name1:'1',name2:'2',...items});
// formValues.items = JSON.parse(JSON.stringify(items));
// this.triggerChange( {...JSON.parse(JSON.stringify(items))});
// console.log(formValues)
// form.setFieldsValue({
// items: formValues.filter((item,i) => i !== i),
// });
// form.setFieldsValue(formValues);
// console.log(formValues)
//
};

handleCurrencyChange1 = (e) => {
console.log(e);

this.props.form.validateFields((err, values) => {
if (!err) {
console.log(values);
}
});
};
/* handleCurrencyChange = (e) => {
console.log(e.target.checked)
this.setState({ isChoosed:e.target.checked});
this.triggerChange( {isChoosed:e.target.checked});

console.log(this.state)
this.props.form.validateFields((err, values) => {
if (!err) {
this.triggerChange(values);
console.log(values)

}
});
}*/
/*handleCurrencyChange1 = (e) => {
console.log(e)
this.setState({ templateName:e });
this.triggerChange( {templateName:e});

this.props.form.validateFields((err, values) => {
if (!err) {

this.triggerChange(values);
console.log(values)
}
});
}*/

handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log(55, values);
});
};

//动态添加树结构参数
loop = (datas) => {
return datas.map((value, key) => {
return <Option key={value.templateName}>{value.templateName}</Option>;
});
};
loop1 = (datas) => {
return datas.map((value, key) => {
return <Option key={value.smsTemplateId}>{value.smsTemplateId}</Option>;
});
};

//判断类型
modifyData = (datas) => {
datas.map((value, key) => {
if (value.templateType == '3010') {
value.templateType = '催收类';
} else if (value.templateType == '3020') {
value.templateType = '通知类';
} else if (value.templateType == '3030') {
value.templateType = '验证类';
} else if (value.templateType == '3040') {
value.templateType = '广告类';
}
});
return datas;
};

/* 请求接口，发送参数 */
getList = (method, data) => {
this.props.dispatch({
type: 'MessageManage/' + method + '',
payload: {
...MixinAjax.baseAjax(method),
tenancyNo: 'TEST0001',
pageNo: 1,
...data
}
});
};

render() {
const { getFieldDecorator, getFieldValue, getFieldsValue, submitting } = this.props.form;

const { MessageManage: { smsConfigModels, messageList: { respCode, smsTemplateList } } } = this.props;
// console.log(smsConfigModels,smsTemplateList);
if (respCode == '0000' && smsTemplateList) {
dataMsm = this.loop(this.modifyData(smsTemplateList));
dataMsm1 = this.loop1(this.modifyData(smsTemplateList));
}

return (
<div style={{ background: '#fff', paddingBottom: 50 }}>
<Form onSubmit={this.handleSubmit} loading={submitting}>
<PageHeaderLayout title="短信配置">
<div style={{ overflow: 'hidden' }}>
<div style={{ width: '100%' }}>
{smsConfigModels.map((value, key) => {
const days = value.days;
const smsConfigId = value.smsConfigId;
const isChoosed = value.isChoosed;
const smsTemplateId = value.smsTemplateId;
const templateName = value.templateName;
const templateCode = value.templateCode;
plainOptionsChecked = days.split(',');
// console.log(value,key,`k${key}`)
let formValues = getFieldsValue();
const item = formValues['smsConfigModels'];
console.log(item);
return (
<div
style={{
overflow: 'hidden',
width: '100%',
boxSizing: 'borderBox'
}}
key={key}
>
<div style={{ overflow: 'hidden', width: '100%' }} key={key}>
<FormItem loading={submitting} style={{ marginBottom: 10 }}>
{getFieldDecorator(`smsConfigModels.${key}`, {
initialValue: { ...value }
})(
<div style={{ overflow: 'hidden' }}>
<div style={{ overflow: 'hidden' }}>
{
/*<CheckboxGroup
options={[value.businessName]}
defaultValue={[value.isChoosed]}
style={{marginTop:10,float:'left',minWidth:'20%'}}
onChange={this.handleCurrencyChange}
>*/
<Checkbox
style={{
marginTop: 10,
display: 'inlineBlock',
minWidth: '16%'
}}
key={smsConfigId}
defaultChecked={
isChoosed == 'false' ? false : true
}
onChange={() => this.handleCurrencyChange(key)}
>
{value.businessName}
</Checkbox>
/* </CheckboxGroup>*/
}
<div style={{ display: 'inline' }}>
短信模板选择：
<Select
style={{ width: 200 }}
placeholder="请选择短信模板类型"
defaultValue={
value.templateName ? (
value.templateName
) : (
'请选择短信模板类型'
)
}
onChange={() => this.handleCurrencyChange1(key)}
>
{dataMsm}
</Select>
<Select
style={{ width: 200, display: 'none' }}
placeholder="请选择短信模板类型"
defaultValue={
value.templateName ? (
value.templateName
) : (
'请选择短信模板类型'
)
}
onChange={this.handleCurrencyChange1}
>
{dataMsm1}
</Select>
</div>
</div>
<div>
{days ? (
<CheckboxGroup
options={plainOptions}
defaultValue={plainOptionsChecked}
onChange={this.handleCurrencyChange3}
style={{
border: '1px solid #ddd',
padding: '1% 4%',
float: 'none'
}}
/>
) : (
''
)}
</div>
</div>
)}
</FormItem>
</div>
</div>
);
})}
</div>
</div>
<FormItem style={{ marginLeft: 200 }}>
<Button type="primary" htmlType="submit">
保存
</Button>
</FormItem>
</PageHeaderLayout>
</Form>
</div>
);
}
}

const MessageDeploys = Form.create({})(MessageDeploy);
export default MessageDeploys;