index.js:1 Warning:
getFieldDecorator
will overridevalue
, so please don’t setvalue
directly and usesetFieldsValue
to set it.
经过排查:
在自定义组件中定义了value值,getFieldDecorator会覆盖我们自己定义的值,需要添加默认值可以使用在getFieldDecorator的时候,设置initialValue,删除在自定义组件中定义的value就可以了!
import React from 'react';
import {
Form,
Select,
Button,
Input,
TreeSelect
} from 'antd';
const { Option } = Select;
const { TextArea } = Input;
const { SHOW_PARENT } = TreeSelect;
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
class ModifyParamsModal extends React.Component {
constructor(props){
super(props);
this.state = {
value: ['0-0-0'],
};
}
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
};
normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
/**
* 同步的TreeSelect值改变回调
*/
onChange = value => {
console.log('onChange ', value);
this.setState({ value });
};
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
const tProps = {
treeData,
// value: this.state.value,//注释掉value值就可以了
onChange: this.onChange,
treeCheckable: true,
showCheckedStrategy: SHOW_PARENT,
searchPlaceholder: 'Please select',
style: {
width: '100%',
},
};
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="参数分类" hasFeedback>
{getFieldDecorator('select1', {
rules: [{ required: true, message: 'Please select your country!' }],
})(
<Input />
)}
</Form.Item>
<Form.Item label="参数key" hasFeedback>
{getFieldDecorator('select2', {
rules: [{ required: true, message: 'Please select your country!' }],
})(
<Input />
)}
</Form.Item>
<Form.Item label="参数名称" hasFeedback>
{getFieldDecorator('select3', {
rules: [{ required: true, message: 'Please select your country!' }],
})(
<Input />
)}
</Form.Item>
<Form.Item label="备注" hasFeedback>
{getFieldDecorator('select4')(
<TextArea rows={4} />
)}
</Form.Item>
{/* 同步的TreeSelect */}
<Form.Item label="模块" hasFeedback>
{getFieldDecorator('selectTree')(
<TreeSelect {...tProps} />
)}
</Form.Item>
{/* <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
<Button type="primary" htmlType="submit" >
Submit
</Button>
</Form.Item> */}
</Form>
);
}
}
const WrapperView = Form.create({ name: 'validate_other' })(ModifyParamsModal);
export default WrapperView;