React antd使用踩坑总结2

最新推荐文章于 2024-04-15 09:42:40 发布

原创最新推荐文章于 2024-04-15 09:42:40 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端 #前端框架

这篇博客总结了在使用React Antd框架时遇到的一些问题及解决方案，包括Popover在固定父元素下的定位问题，Table组件的选择与多选问题，表格选中状态的保持，TextArea的样式与高度设置，以及Select的模糊搜索和禁用输入空格的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：初级react，记录工作中问题，积累经验，如有问题请多赐教！

1、处理Ant Design 3.24.3版本Popover在父元素fixed的情况下跟随滚动条改变位置的问题

背景：

1.导航栏fixed到顶部

2.悬浮出现popover气泡卡片，但气泡卡片随着滚动条滚动改变位置

解决方案：

在popover上使用 getPopupContainer={triggerNode => triggerNode.parentNode}

2、处理antd table其中某一项的值如果超出，使用....显示：

{
  title: 'config_content',
  key: 'Content',
  onCell: () => {
    return
        {
          style: {
            maxWidth: 600,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer'
                 }
        }
},

3、Antd Table无法选择&多选问题，根据antd table 可选择案例，发现点击任意元素都会变成全选，或者取消全选，无法单个选择

原因dataSource 里面没有key属性，需要给Table 添加 rowKey="id"

4、Ant table表格选中后点击下一页上一页选中的内容丢失

只需要在 Table 标签的 rowSelection 属性对象内输入

preserveSelectedRowKeys: true ，即可

let rowSelection = { preserveSelectedRowKeys: true, };
<Table  rowSelection={rowSelection}  />

5、antd 中的TextArea样式以及固定高度设置

固定高度使用： row={5}

<TextArea style={{ width: '100%', resize: 'none' }} rows={5} />

6、antd select的模糊搜索以及多选

<Form form={form}>
    <Form.Item label='标签' name="TagName" labelAlign="left" >
    <Select 
      mode="multiple"  / /支持多选
      showSearch
      allowClear
      filterOption={(input, option: any) => option?.props.children?.indexOf(input) >= 0}   / /模糊搜索
      getPopupContainer={triggerNode => triggerNode.parentNode}>
    {handlerUser.map((res) => (
        <Select.Option key={res?.id} value={res?.TagName}> / /支持鼠标点到select框后，将后端数据展示到下拉框
          {res?.TagName}
        </Select.Option>
    ))}
    </Select >
</Form.Item>
</Form>

7、antd的form 的input输入框怎么限制不能输入空格

AntDesign中的Form表单其实提供了非常丰富的校验方式，有两种方式解决input不能输入空格的问题（具体看自己的需求）

<Form.Item label="名字">
  {getFieldDecorator('name', {
    rules: [
        {
         required: true,
         message: '请输入名字',
        },
   // 方式一：正则匹配（提示错误，这种会在提交表单时给提示，阻止表单提交）
       { pattern: /^[^\s]*$/, message: '禁止输入空格',}
],

  // 方式二：粗暴点<Input>不允许输入空格(其实是将e.tartget.value转成控件自己的值)
  // 这个方法的用途非常强大，还可以结合upload做一些文件上传之后的回调处理
      getValueFromEvent: (event) => {
         return event.target.value.replace(/\s+/g,"")
        },
})
(<Input size="large" placeholder="请输入名字" maxLength={20} />)}
</Form.Item>