Question

我绝对是个新手，我从antdesign网站复制了登录表单的代码。但现在我收到此错误消息。您能帮我找到错误吗？

“'Readonly <{子代？：ReactNode;}>＆Readonly>'找不到'form' 属性。 “

这是代码：

class NormalLoginForm extends React.Component <{}, { value: string }>{
handleSubmit = (e: any) => {
  e.preventDefault();
  this.props.form.validateFields((err: any, values: any) => {
    if (!err) {
      console.log('Received values of form: ', values);
    } 
  });
}
render() {
  const { getFieldDecorator } = this.props.form;
  return (
    <Form onSubmit={this.handleSubmit} className="login-form">
      <FormItem>
        {getFieldDecorator('userName', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(
          <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
        )}
      </FormItem>
      <FormItem>
        {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" />
        )}
      </FormItem>
      <FormItem>
        {getFieldDecorator('remember', {
          valuePropName: 'checked',
          initialValue: true,
        })}

      </FormItem>
    </Form>
  );
}

}

const WrappedNormalLoginForm = Form.create（）（NormalLoginForm）;

Answer 1

首先，您必须在使用前了解道具的概念。其次，我看到错误，无论您得到的是'Readonly <{children ?: ReactNode; }>＆Readonly>'找不到'form'属性。 ”，并且您粘贴以供参考的代码不同步。

正如我所看到的代码，该组件正在使用一个名为“ form”的道具，该道具应为由此“ NormalLoginForm”的父组件传递，或者道具应在其自己的引用（mapSateToProps）中可用。

基于提供的最少代码参考：我看到在这种情况下可能有两个问题。 1.“形式”道具不传递给特定组件。 2.表单是最重要的：如果您要从父级传递“表单”属性（使用不同的数据），并且在这种情况下还提供“表单”属性的内部引用（mapStateToProps），您可能会发现此类问题。

解决方案：

无论您在哪里渲染“ NormalLoginForm”，都从那里传递“ form”道具
```
                                      OR
```
如果您将“ NormalLoginForm”包装了一些父级组件，则不需要传递道具，它将自动可用（如果父项需要该道具）。

注意：如果组件是某些事物的子元素，则始终尝试从父元素传递所需的道具，并尝试使子元素变为无状态。

找不到'form'属性this.props.form反应

1 个答案: