Question

我正在尝试制作一个简单的form。

如果输入了所有有效数据，我将获得所有有效数据；如果未输入，我将在控制台上收到错误：

异步验证程序：[“必须输入用户名”]

异步验证程序：[“需要密码”]

但是错误没有呈现。

父母

const HomePage = () => (
  <Layout className="layout" style={{ minHeight: '100vh' }}>
    <Header>Teste</Header>
    <Content className={_s.Content}>
      <LoginForm />
    </Content>
    <Footer style={{ textAlign: 'center' }}>React Node Boilerplate by Igor Cesar</Footer>
  </Layout>
);

export default HomePage;

表格

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

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit} className={_s.loginForm}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }]
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true
          })(<Checkbox>Remember me</Checkbox>)}
          <a className={_s.loginFormForgot} href="/">
            Forgot password
          </a>
          <Button type="primary" htmlType="submit" className={_s.loginFormButton}>
            Log in
          </Button>
          Or <a href="/">register now!</a>
        </Form.Item>
      </Form>
    );
  }
}

const WrapperLoginForm = Form.create()(LoginForm);

export default WrapperLoginForm;

Answer 1

为了帮助将来会访问此页面的人

作者reported the bug to antdesign和一个解决方案。

这是lodash-webpack-plugin的问题，所需的更改在 webpack.config.js 中。原来LodashModuleReplacementPlugin()应该收到{paths: true}作为参数，问题解决了。

module.exports = {
    //... rest of your webpack config
    plugins: [
        //... rest of your plugins
        new LodashModuleReplacementPlugin({paths: true}),
    ],
}

表单异步验证程序未呈现

1 个答案: