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

我的问题：今天先根据手机号查询一个用户，根据文档引用Input中的Search，我添加了一个样式，发现输入框无法输入内容，

代码：

 return (
   <div>
     <Search
     style={{ width: 300, float: "right" }}
     placeholder="手机号"
     onSearch={value => this.findAppUserByPhoneNo(value)}
     onChange={this.onChangePhoneNo}
     value={searchText}
     enterButton
    />
    <Table .../>
    <Pagination .../>
</div>

效果图：鼠标点击白色输入框无法没有反应，无法输入内容，点击蓝色部分可以输入，但是这样的客户体验不好

解决办法：

在搜索框的前面添加一个东西，例如一个button或者span标签；个人觉得原因是：是受float:"right"影响 ，大家有不同意见的告诉我！

render(
  <div>
    <Button type="primary" onClick={this.userFilter}>
     全部用户
    </Button>
    <span style={{ marginLeft: 20, color: "#1890FF" }}>总人数:{total}</span>
         <Search
     style={{ width: 300, float: "right" }}
     placeholder="手机号"
     onSearch={value => this.findAppUserByPhoneNo(value)}
     onChange={this.onChangePhoneNo}
     value={searchText}
     enterButton
    />
    <Table .../>
    <Pagination .../>
  </div>
)

效果：

补充知识：Antd form表单中input失效，无法输入字符串，只能输入单个字符

问题描述

删掉{getFieldDecorator(name, {})这一段 表框可以正常输入。

解决办法

检查form表单或者父节点是否使用了 key=Math.random() 之类给组件添加唯一值的代码。

以上这篇解决ant Design Search无法输入内容的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue项目中引用Antv G2,以饼图为例讲解

    我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: ​//引入G2组件 import G2 from "@antv/g2"; ​ export default { name:"", //数据部分 data(){ retur

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • 在antd Table中插入可编辑的单元格实例

    最近遇到一个需求,要求表格中某一属性是可以手动改变的.看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下. 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀.具体代码见贴图 补充知识:React+Ant Design实现可编辑单元格.添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表

  • VUE和Antv G6实现在线拓扑图编辑操作

    效果图如下: 我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. 也可以npm 方式引入. 2.写组件 export default { name: "index", components: {}, mounted() { this.initG6(); }, data() { return { action: '', name: '', f

  • 在Vue中使用Viser说明(基于AntV-G2可视化引擎)

    前言 AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用. 安装viser-vue yarn add viser-vue yarn add @antv/data-set main.js中引入 import Viser from 'viser-vue' Vue.use(Viser) 定义d2demo.vue组件 <template> <div> <v-chart :forceFit="true" :height=&quo

  • vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.

  • ant design vue导航菜单与路由配置操作

    此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select

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

    我的问题:今天先根据手机号查询一个用户,根据文档引用Input中的Search,我添加了一个样式,发现输入框无法输入内容, 代码: return ( <div> <Search style={{ width: 300, float: "right" }} placeholder="手机号" onSearch={value => this.findAppUserByPhoneNo(value)} onChange={this.onChangeP

  • 解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

    场景描述: 如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值: <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <F

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

  • 解决ant Design中this.props.form.validateFields未执行的问题

    在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错. 原因: 我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量. 注意: 1.使用validator 时,注意自定义方法中是否有错误:对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • 解决ant Design中Select设置initialValue时的大坑

    我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转

  • Ant Design 的Bug修复示例详解

    目录 引言 第一步.选择要修复的Bug 第二步.准备工作 第三步.问题排查 第四步.问题修复 第五步.单元测试 第六步.提交Pull Request 总结 引言 我在工作中大量使用Ant Design,它为我省去了很多重复劳动,所以有空的时候,我也会为Ant Design做一些微小的贡献. 本文详细描述了我处理一个Ant Design的Bug全过程,文章内容较多但难度并不高,新手同学看完也可以尝试为Ant Design添砖加瓦! 第一步.选择要修复的Bug Ant Design有不少Bug,你可

  • 浅谈Vue+Ant Design form表单的一些坑

    浅谈Vue+Ant Design form表单的一些坑

    目录 设置默认值的坑 自定义 v-decorator 组件的坑 最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的 设置默认值的坑 控制台报 Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]&q

  • 前端开发使用Ant Design项目评价

    前端开发使用Ant Design项目评价

    目录 好的方面 不好的方面 更新@2020 更新@2022 Tooltip 直接使用 rc-tooltip 的 props type 好的方面 作为前端开发使用 Ant Design 1年多了,想说几句. 先说好的方面—— 它提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面.这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库.他们的经验积累如此之丰富,足以让这个库支持大部分其他

  • vue+Ant Design进度条滑块与input联动效果实现

    需求:滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100 子组件: <template> <div class="progress-box"> <div ref="slider" class="slider" > <div class="process" :style="{ width }" ></div> <div ref

随机推荐