Reactjs 使用Ant design getFieldDecorator时，会触发其他验证消息，而不是我的消息

我使用的是Ant design，这是我的表单，当我点击save时，我得到的是这种类型的验证消息，而不是红色边框的Antd验证消息

我希望在AntD文档中显示类似这样的验证错误。

我已经这样写了我的函数

      <Form  id="myForm" onSubmit={this.handleSubmit}>
          <Form.Item label="Code">
                      <CustomInput
                        form={this.props.form}
                        type="text"
                        disabled={this.state.disableFields}
                        name="code"
                        id="code"
                        placeholder=""
                        required={true}
                        errorMsg={"Please input code!"}
                      />
        </Form.Item>
   </Form>

这是我的自定义输入

const CustomInput = ({
  form, id, name, placeholder, required, errorMsg, type, disabled,}: Props) => {
  return form.getFieldDecorator(id, {
    rules: [
      {
        required: required,
        message: errorMsg
      }
    ]
  })(
    <Input
      type={type}
      name={name}
      id={id}
      disabled={disabled}
      placeholder={placeholder}
      className={name === "code" ? "code-input" : "input-box"}
    />
  );
};

export default CustomInput;

const CustomInput=({
表单、id、名称、占位符、必填项、errorMsg、类型、已禁用、}:Props）=>{
返回表单。getFieldDecorator（id{
规则：[
{
必选：必选，
信息：errorMsg
}
]
})(
);
};
导出默认自定义输入；

这是我的保存按钮

             <Button
                className="save-btn"
                htmlType="submit"
                form="myForm"
              >
                Save
              </Button>

拯救

---

我想我遗漏了一些东西。提前感谢

Ant设计输入没有必需的道具。。 所需的道具应在form.item rules道具中给出

由于您已经给出了Required to input标记，它将导致Chrome显示提示，提示用户填写字段

根据评论进行更新

将formitem标记移到custominput组件内，然后重试

  <Form  id="myForm" onSubmit={this.handleSubmit}>

                      <CustomInput
                        form={this.props.form}
                        type="text"
                        disabled={this.state.disableFields}
                        name="code"
                        id="code"
                        placeholder=""
                        required={true}
                        errorMsg={"Please input code!"}
                      />
   </Form>

const CustomInput=({
表单、id、名称、占位符、必填项、errorMsg、类型、已禁用、}:Props）=>{
返回(
{form.getFieldDecorator（id{
规则：[
{
必选：必选，
信息：errorMsg
}
]
})(
)}
) 
};

你能创建一个codesandbox吗？我已经从中删除了所需的道具，现在我无法获得chrome vallidation。但我仍然需要展示蚂蚁设计的红边验证。为什么他们不工作更新我的答案…看看它（如果它工作，选择这作为一个有用的答案，将有助于其他人）它的工作与更新的答案，但移动内部不是一件好事，我在许多地方使用它。为什么不与外界合作

const CustomInput = ({
  form, id, name, placeholder, required, errorMsg, type, disabled,}: Props) => {
  return(
   <Form.Item label="Code">
{form.getFieldDecorator(id, {
    rules: [
      {
        required: required,
        message: errorMsg
      }
    ]
  })(
    <Input
      type={type}
      name={name}
      id={id}
      disabled={disabled}
      placeholder={placeholder}
      className={name === "code" ? "code-input" : "input-box"}
    />
  )}

</Form.Item>
) 
};