鍍金池/ 問答/HTML/ andesign 的form提交 為什么用validateFields 回出現(xiàn)報(bào)

andesign 的form提交 為什么用validateFields 回出現(xiàn)報(bào)錯(cuò)

報(bào)錯(cuò)內(nèi)容:
ypeError: Cannot read property 'push' of undefined

at createBaseForm.js:359
at Array.forEach (<anonymous>)
at createBaseForm.js:353
at complete (index.js:89)
at index.js:225
at next (util.js:148)
at count (util.js:93)
at cb (index.js:173)
at Object.required [as validator] (required.js:8)
at index.js:216

版本:
"antd": "^2.12.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
——————————————————————————————————————————
代碼:
import { Form, Row, Col, Input, Button, Icon } from 'antd';
import React, {Component} from 'react';

const FormItem = Form.Item;

class AdvancedSearchForm extends Component {

state = {
    expand: false,
};

handleSearch = (e) => {
    e.preventDefault();
    console.log("提交了。。。",this.props.form.getFieldsValue());
    try{
    this.props.form.validateFields((err, values) => {
        if (!err) {
            console.log('Received values of form: ', values);
        }

    });
    }catch(ex){
        console.log(ex)
    }

}

handleReset = () => {
    this.props.form.resetFields();
}

toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
}

getFields() {
    const count = this.state.expand ? 10 : 6;
    const { getFieldDecorator } = this.props.form;
    const children = [];
    for (let i = 0; i < 10; i++) {
        children.push(
            <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
                <FormItem label={`name${i}`}>
                    {getFieldDecorator(`name${i}`, {
                        rules: [{
                            required: true,
                            message: '該字段為必填字段',
                        }],
                    })(
                        <Input placeholder="請(qǐng)輸入..." />
                    )}
                </FormItem>
            </Col>
        );
    }
    return children;
}

render() {
    return (
        <Form onSubmit={this.handleSearch}>
            <Row gutter={24}>{this.getFields()}</Row>
            <Row>
                <Col span={24} style={{ textAlign: 'right' }}>
                    <Button type="primary" htmlType="submit">提交</Button>
                    <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                        重置
                    </Button>
                    <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                        {this.state.expand ? '更多' : '隱藏'} <Icon type={this.state.expand ? 'up' : 'down'} />
                    </a>
                </Col>
            </Row>
        </Form>
    );
}

}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);

export default WrappedAdvancedSearchForm;


主鍵引用:
<WrappedAdvancedSearchForm/>

回答
編輯回答
空白格

個(gè)人猜測(cè)版本問題... 有大神提供思路嗎? 除了提升antd版本

2018年3月5日 08:52
編輯回答
傲嬌范

getFields()方法中的const children = [];修改為:
let children = [];

2017年8月4日 02:29
編輯回答
不歸路

我也遇到這個(gè)問題,請(qǐng)問找到解決方案了嗎

2018年6月12日 12:46