react antd 项目遇到问题总结

最新推荐文章于 2023-09-19 09:23:07 发布

sulingliang

最新推荐文章于 2023-09-19 09:23:07 发布

阅读量959

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_32862143/article/details/106080194

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

效果图： input框里的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>

获取form表单内容

const [form] = Form.useForm();
const handleChange = async () => {
    const fieldsValue = await form.validateFields();
    console.log({fieldsValue})
 }

select下拉框无限滚动

// 加载更多数据
const getMoreAppIdList = (e: any) => {
    e.persist();
    const { target } = e;
    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
      setAppPagination({
        current: appPagination.current + 1,
        pageSize: appPagination.pageSize,
      });
    }
  };
  // 若页码是第一页的时候，不加载getMoreAppIdList方法
    useEffect(() => {
    if (appPagination.current !== 1) {
      getAppIdList('loading more'); // 调用api方法
    }
  }, [appPagination]);
  // 触发回调方法
  <Select
    // 省略部分内容
     onPopupScroll={getMoreAppIdList}
   >
   </Select>