解决antd中Povper包裹Input结合Form.Item出现的箭头定位误差

 

如果在Form.Item中使用Popover包裹Input会导致无法触发rules （这里指直接把Popover包裹Input写在Form.Item里面），

只得Popover包Form.Item包Input但是存在标题中提到的rules验证开启时的气泡箭头定位误差（如图）

然后给官方提了Issues——

得知，Popover是官方封装了自己的Tooltip（猜测，毕竟看到了相似的API），然后Tooltip底层便是rc-tooltip

 

虽然还没来得及看完文档测试demo，官方的afc163已经给出了解决办法，

 

最终解决的效果图

最终demo代码

import React from "react";
import ReactDOM from "react-dom";
import { version, Form, Popover, Input, Col, Row } from "antd";
import "antd/dist/antd.css";

const InputWithPopover = props => (
  <Popover
    content={"用户名由3~32位数字/英文/汉字组成"}
    trigger="hover"
    placement="right"
    className="register_help"
  >
    <Input {...props} />
  </Popover>
);

class LoginComponent extends React.Component {
  constructor(props) {}
  register_formRef = React.createRef();
  render() {
    return (
      <div style={{ width: 200 }}>
        <Form
          ref={this.register_formRef}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          labelAlign={"left"}
        >
          <Form.Item
            name="userName"
            label={<b>用户名:</b>}
            colon={false}
            rules={[
              { required: true, message: "用户名不可为空!" },
              { pattern: /^\S+$/, message: "不可以输入空格" },
              {
                pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{3,32}$/,
                message: "需要3~32位数字/英文/汉字"
              }
            ]}
            hasFeedback
          >
            <InputWithPopover placeholder="请输入用户名" style={{ width: '100%' }} />
          </Form.Item>
        </Form>
      </div>
    );
  }
}
ReactDOM.render(
  <div className="App">
    <h1>antd version: {version}</h1>
    <LoginComponent />
  </div>,
  document.getElementById("root")
);

补充推测：首段有提到，笔者也不是没试过Form.Item包Poppver包Input，没成功应该是Form.Item确实默认只能作用于直接的子元素，所以afc163的解决办法里通过封装组件将外层InputWithPopover 接收到的props参数中转给了最低层的Input