Antd search input无中框

我也秃了

已于 2023-12-07 16:08:43 修改

阅读量277

点赞数 1

分类专栏： React 入坑学习文章标签： react ant

于 2023-12-07 16:05:55 首次发布

本文链接：https://blog.csdn.net/qq_40044912/article/details/134857937

版权

React 入坑学习专栏收录该内容

49 篇文章 13 订阅

订阅专栏

发现input.search，搜索图标的左侧有个竖线，不是很好看

把它改掉, 新建一个自己的CSS

.custom-search-input{
    .ant-input-affix-wrapper{
      border-right: none !important;
    }
    .ant-input-group-addon{
      .ant-btn{
        border-left: none !important;
      }
    }
  }

应用

<Search placeholder="input search text" className="custom-search-input"/>

就会发现中间的竖框没有了

如果有帮助到你，能点个赞嘛！!谢谢！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我也秃了

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

antd-input-tag.zip

06-25

"antd-input-tag"是一个Antd中的组件，专门用于将用户在input框中输入的内容转化为可操作的tags，这种功能常见于标签管理系统或者输入筛选条件的场景。 Antd Input Tag组件的核心功能是将用户的连续输入截断成单独...

改变Antd Angular 默认样式

Menqq的博客

06-22

416

类名等前加::ng-deep；类名等前加：root；类名等前加:host /deep/；在审查元素中找到对应的类名或id，然后直接在自己的css文件中用相同的名字定义样式就可以直接替换了。 ::ng-deep .ant-input-group-addon{ background-color: @tabs-card-head-input-background; border: 1px solid @tabs-card-head-input-background;

参与评论您还未登录，请先登录后发表或查看评论

react-antd组件 input输入框：实现按回车搜索

最新发布

outstanding木槿

10-25

1712

antd组件里搜索框。

Form表单里面有内嵌的div，无法获取到表单值

q1054007919的博客

02-10

1839

<Form.Item {...layout} > <div className='unitName_style'> <span className="ant-input-group-addon"> <Iconfont type="icon-bumenguanli"/> </span> <Form.Item name="roleId" rules={[{requ..

【antdv】input实现搜索框获取清空输入值

Handsome_gir的博客

10-15

1582

使用Ant Design of Vue 1版本，实现搜索框。

使用ref手动改变antd的搜索框Input.Search的搜索内容

u010007013的博客

12-08

4081

antd提供了Input.Search搜索框组件，它的其余属性和 Input 一致，通过value当然可以修改搜索内容，这里介绍另外一种方法来修改搜索的内容。直接上代码： import { useRef } from 'react'; import { Input } from 'antd'; ... const searchRef = useRef(null) ... <Input.Search ref={searchRef} placeholder='请输入' onSearch={O

input之怎么清除默认值

01-19

input name=”username” type=”text” value=”first name.last name” size=”15″ maxlength=”60″ onfocus=”this.value=””>那如果我再把鼠标移开,又出现默认值,而当我输入了之后,则不会出现...

Angular限制input框输入金额（是小数的话只保留两位小数点）

01-19

checkInput: function (event) { var id = event.target.getAttribute(“id”);//获取input的id var reg = /^[-?\d]+(.)?(\d{1,2})?/;//匹配正则while(!reg.test(('#' + id).val()) && (‘#' + id).val() != “”) {...

在react项目中使用antd的form组件,动态设置input框的值

01-18

点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。解决办法：不使用...

antd Tree组件搜索标红例子

09-09

antd 的Tree组件带搜索，搜索内容标红

解决ant Design Search无法输入内容的问题

01-21

我的问题：今天先根据手机号查询一个用户，根据文档引用Input中的Search，我添加了一个样式，发现输入框无法输入内容，代码： return ( this.findAppUserByPhoneNo(value)} onChange={this.onChangePhoneNo} value={searchText} enterButto

antd ＜Input.Search＞中 onChange(e) 实时拿到当前输入的值

zhangyubababa的博客

01-30

2390

e.target.value. setKeywords(e.target.value);

ant的Search组件，搜索框内容清空

qq_39056703的博客

11-27

3465

<Search ref= "searchBar" placeholder="请输入开关名称或开关描述" enterButton="搜索" size="large" onSearch={this.inputSearch} allowClear /> //清空操作 reset = () => { this.refs.searchBar.input.state.value=''; }

ant-design的Search组件，搜索框内容清空，有图有代码

热门推荐

祥哥的说

09-08

1万+

问题情境：使用了antd的Search组件，带搜索按钮的，希望点击重置之后可以清空之前输入的搜索内容问题解决： <Search ref= "searchBar" placeholder="请输入开关名称或开关描述" enterButton="搜索" size="large" onSearch={this.inputSearch} allowClear /&g...

antd input组件，获取焦点时更改该组件的样式

逆风优雅的博客

01-21

4096

1. 首先给该组件注册一个失去焦点的事件 <a-input-search placeholder="请输入搜索产品名称" class="header_input" @search="onSearch" @focus="focusSearch" @input="searchValue" v-model="searchText" ref="a_input_se

利用antd进行轻量级表单开发，获取验证码

weixin_38330185的博客

04-19

1527

利用antd完成轻量化表单开发，主要解决的是获取验证码功能

去掉input各种边框

lfalt的博客

03-08

245

.ant-input{ border: 0px ; box-shadow: none ; outline: none; }

修改antd组件，搜索框中图标的样式

逆风优雅的博客

01-19

2548

此图标默认的颜色并不是蓝色 <a-input-search placeholder="请输入搜索产品名称" class="header_input" @search="onSearch" /> 打开控制台，找到控制这个图标的class类名，通过样式穿透，设置该样式 .header_input >>> .ant-input-search-icon { color: #3471ff ...

antd 中有选择的搜索框的使用

weixin_45343326的博客

09-27

4193

onSelect = (val, option) => { const initData = this.state.getByServerData; const fitList = initData.filter(r => r.ipAddress === option.props.text); const dataSource = { items: fitList, totalC...

antd table input筛选

05-31

Antd Table 支持使用 Input 组件进行筛选，可以在列的配置中设置 `filterDropdown` 属性来自定义筛选菜单。例如，在一个列上设置了 Input 筛选，可以这样写列的配置： ```jsx { title: 'Name', dataIndex: 'name', filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( <div style={{ padding: 8 }}> <Input placeholder="Search name" value={selectedKeys[0]} onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => confirm()} style={{ width: 188, marginBottom: 8, display: 'block' }} /> <Button type="primary" onClick={() => confirm()} size="small" style={{ width: 90, marginRight: 8 }} > Search </Button> <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}> Reset </Button> </div> ), onFilterDropdownVisibleChange: (visible) => { if (visible) { setTimeout(() => this.searchInput.select()); } }, render: (text) => <Highlighter highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} searchWords={[this.state.searchText]} autoEscape textToHighlight={text.toString()} />, } ``` 上面的配置中，`filterDropdown` 属性用来自定义筛选菜单。它接收一个对象作为参数，包含四个属性： - `setSelectedKeys`：设置选中的筛选项 - `selectedKeys`：当前选中的筛选项 - `confirm`：确认筛选的回调函数 - `clearFilters`：重置筛选的回调函数在 `filterDropdown` 中，我们使用了 Antd 的 Input 和 Button 组件来实现筛选菜单。其中，Input 的值使用 `selectedKeys[0]`，并在 `onChange` 事件中通过 `setSelectedKeys` 来设置选中的筛选项。按下 Enter 键后，会触发 `confirm` 回调函数进行筛选。点击 Search 按钮和 Reset 按钮，分别会触发 `confirm` 和 `clearFilters` 回调函数。除了 `filterDropdown` 属性外，还需要设置 `onFilterDropdownVisibleChange` 属性来控制筛选菜单的显示和隐藏。在 `onFilterDropdownVisibleChange` 中，我们使用了 `setTimeout` 函数来延迟调用 `select` 方法，以便在 Input 出现后立即获取焦点。最后，在 `render` 函数中，我们使用了 `Highlighter` 组件来高亮匹配的文本。需要注意的是，上面的示例中使用了 `this.state.searchText` 来表示当前的搜索文本。如果需要将搜索结果保存到状态中，还需要定义 `state` 和 `setState` 方法。另外，如果使用函数式组件，需要使用 `useState` 钩子来实现状态管理。