react antd 项目遇到问题总结

页面刷新，左侧菜单仍为选中状态

import { withRouter } from 'react-router-dom';
<Menu
   XXX
   selectedKeys={[this.props.pathname]}
 ></Menu>
 export default withRouter(Sidebar);

tooltip宽度设置及换行

tooltip默认设置的最大值

重点： tooltip的宽度设置为maxWidth

<Tooltip
  overlayStyle={{ maxWidth: 400 }}
  overlay={
      <div>
        xxx
        <br />
        xxx
      </div>
    }
>
</Tooltip>

input框里的tooltip显示与隐藏

// 初始化
const [tooltipVisible, setTooltipVisible] = useState(false);

<Tooltip
  visible={tooltipVisible}
  overlayStyle={{ maxWidth: 500 }}
  overlay={
    <div>xxx</div>
  }
>
  <Input
    type="text"
    placeholder="请输入xxx"
    value={xxx}
    disabled={
      xxx.length
    }
    onMouseOver={() =>
      xxx.length &&
      setTooltipVisible(true)
    }
    onMouseLeave={() =>
      xxx.length &&
      setTooltipVisible(false)
    }
  />
</Tooltip>

效果图：

国际化 英文转中文

日期选择器、分页、表格排序等等，如不设置，默认都是英文

import zhCN from 'antd/es/locale/zh_CN';
<ConfigProvider locale={zhCN}>
  <Header />
</ConfigProvider>

参考链接：antd国际化

表格里的分页属性设置

// 初始化分页
const [pagination, setPagination] = useState({
  current: 1,
  pageSize: 10,
});

// 表格属性
<Table
  pagination={{
    ...pagination,
    showSizeChanger: true, // 一页展示几条
    showQuickJumper: true, // 跳转至第几页
    showTotal: () => `共${pagination.total}条`, // 总数
  }}
  onChange={handleTableChange}
/>

// 获取数据 更新分页属性
const getData = (pagination: any) => {
    }).then((res: any) => {
      setPagination({
        current: res.pageNum,
        pageSize: res.pageSize,
        total: res.totalCount,
      });
    });
  };

form表单

更新表单属性

// 更新全部
form.setFieldsValue(editData);

// 单一更新
form.setFieldsValue({ frontendProxyPort: frontendProxyPort });

表单验证 输入内容须在数字、字母、下划线范围内

const validateForm = (length: any, value: any) => {
  const pattern = /^[\u4E00-\u9FA5A-Za-z0-9_]{0,}$/;
  if (value && value.length > length) {
    return Promise.reject(`输入字符长度不超过${length}`);
  } else if (!pattern.test(value)) {
    return Promise.reject('输入内容须在数字、字母、下划线范围内');
  }
  return Promise.resolve();
};

验证方式 onChange onSubmit

<Form.Item
  name="xxx"
  className="xxx"
  validateTrigger={['onChange', 'onSubmit']}
  label={xxx}
  rules={[
    {
      validator(_, value) {
        return validateForm(20, value);
      },
      validateTrigger: 'onChange',
    },
    {
      validator(_, value) {
        return validateExists(value);
      },
      validateTrigger: 'onSubmit',
    },
  ]}
></Form.Item>