Question

完全遵循example code。我遇到这个错误。只有当我排除使用FormItem包装输入时，错误才消失。还有谁有相同的问题吗？我完全遵循了代码。

使用 antd@3.10.7 react@16.5.2

我的代码：从'react'导入React；从“ antd”导入{表单，选择，输入，按钮}；

const FormItem = Form.Item;
const Option = Select.Option;

class NewForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      }

      handleSelectChange = (value) => {
        console.log(value);
        this.props.form.setFieldsValue({
          note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
      }

    render() {
        const { getFieldDecorator } = this.props.form;
        const hi = <Input />;
        console.log('hi', hi, typeof hi);
        return (
            <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('note', {
                    rules: [{ required: true, message: 'Please input your note!' }],
                    })(<Input />)}
                </FormItem>
                <FormItem>
                        {getFieldDecorator('gender', {
                        rules: [{ required: true, message: 'Please select your gender!' }],
                    })(
                        <Select
                        placeholder="Select a option and change input text above"
                        onChange={this.handleSelectChange}
                        >
                        <Option value="male">male</Option>
                        <Option value="female">female</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </FormItem>
            </Form>
        );
    }
}


export default Form.create()(NewForm);

Answer 1

我设法通过升级以下Webpack模块来解决错误。希望它能帮助其他人。

旧package.json

"@babel/cli": "7.0.0-beta.55",
"@babel/core": "7.0.0-beta.55",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
"@babel/plugin-proposal-export-default-from": "^7.0.0-beta.55",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.55",
"@babel/plugin-transform-arrow-functions": "^7.0.0-beta.55",
"@babel/plugin-transform-runtime": "7.0.0-beta.55",
"@babel/polyfill": "^7.0.0-beta.55",
"@babel/preset-env": "7.0.0-beta.55",
"@babel/preset-react": "7.0.0-beta.55",

新package.json

"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.5",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-arrow-functions": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",

完全遵循以下示例后，无法使用antd FormItem

1 个答案: