首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在onSearch上将antd input.search设置为只读

在antd中,可以通过设置Input.Search组件的readOnly属性来将其设置为只读。readOnly属性用于指定输入框是否只读,即用户无法编辑输入框中的内容。

以下是一个示例代码,演示如何将antd的Input.Search组件设置为只读:

代码语言:txt
复制
import { Input } from 'antd';

function MySearch() {
  return (
    <Input.Search
      placeholder="请输入关键字"
      onSearch={value => console.log(value)}
      readOnly
    />
  );
}

在上述代码中,我们将Input.Search组件的readOnly属性设置为true,即readOnly={true}或简写为readOnly。这样用户就无法编辑输入框中的内容,只能通过点击搜索按钮或按下回车键来触发onSearch事件。

关于antd的Input.Search组件的更多信息,你可以参考腾讯云的Ant Design官方文档:Input.Search

请注意,以上答案仅供参考,具体实现方式可能因项目环境、版本等因素而有所差异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在Ubuntu 16.04上将Redis服务器设置PHP的会话处理程序

介绍 Redis是一个开源键值缓存和存储系统,由于其对多种数据类型(散列,列表,集合和位图等)的高级支持,也称为数据结构服务器。它还支持群集,使其在高度可用和可扩展的环境中非常有用。...您可以按照我们在两台服务器上的Ubuntu 16.04初始服务器设置指南来设置这两个要求。...第三步:Redis服务器设置密码 要为Redis安装添加额外的安全层,建议您设置用于访问服务器数据的密码。...我们将在/etc/redis/redis.conf位置编辑Redis配置文件: sudo nano /etc/redis/redis.conf 找到该requirepass指令并将其设置强密码...第五步:将Redis设置Web服务器上的默认会话处理程序 现在我们需要在Web服务器上编辑php.ini文件以更改PHP的默认会话处理程序。此文件的位置取决于您当前的堆栈。

1.5K41
  • React Hook技术实战篇

    Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, State Hook提供类型setState的功能, Effect Hook...这里的初始的data空数组, 目前还没有人为设置数据. import React, { useState, useEffect } from 'react'; import { Form, Input...setData(result.data.data.list); }; fetchData(); },[]); ... } 只需要在useEffect函数中, 第二个参数空数组...如果包含变量的数组空,则在更新组件时挂钩不会运行,因为它不必监视任何变量.更多关于Effect Hook的详情,点击此处 手动触发Hook 此时, 组件安装成功后会获取数据, 现在, 我们希望可以有个点击按钮可以触发...例如,在成功请求的情况下,有效载荷用于设置新状态对象的数据。 总之,Reducer Hook确保状态管理的这一部分用自己的逻辑封装。通过提供操作类型和可选的有效负载,你将可以以自己可预见的状态结束。

    4.3K80

    「前端组件化」以Antd例,快速打通UI组件开发的任督二脉

    每个系统,无论是业务特性、交互特性还是UI特性,都可以整理出一部分通用组件,比如标题、页面布局、列表、可编辑表格、模糊搜索框等以列表Antd有现成的Table组件,但是我们实际开发中,一般列表管理页是带搜索项以及数据展示的...showSearch} filterOption={false} showSearch={showSearch} placeholder={placeholder} onSearch={showSearch...onSearch : null} onSelect={onSelect} onClear={onClear} style={{ width }}> <Select.Option key={item[optionValue...2.栅格的占位格数,也是它的宽度,样式实现时使用百分比,比如span的值6时,24等分之后,它的百分比是25%。....其中单元格的标签会根据传入的component的值不同,使用不同的标签,默认为td,表头thead传入的tr。

    2.2K10

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(新手入门篇)

    这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...ng add ng-zorro-antd 【重要】设置项目的相关配置,并选择模板创建项目:  Skipping installation: Package already installed?...启用图标动态加载):y set up custom theme file(设置自定义主题文件):y choose your locale code(选择区域设置代码):ZH-CN choose template...手动安装ng-zorro-antd: 安装组件: npm install ng-zorro-antd --save 如果上面命令安装失败,可以试试下面的cnpm安装: cnpm install ng-zorro-antd...@import "~ng-zorro-antd/ng-zorro-antd.less"; 引入组件模块: 以下面的 NzButtonModule 模块例,先引入组件模块: import { NgModule

    3.5K11

    ExcelJS导出Ant Design Table数据Excel文件

    可以满足(但不限于)以下需求: 简单表格导出 表格添加样式(更改背景色、更换字体、字号、颜色) 设置行高、列宽 解析 ant-design 的 Table 直接导出 excel,根据 antd 页面中设置的列宽动态计算...workbook.modified = new Date(); // 修改日期 workbook.lastPrinted = new Date(2016, 9, 27); // 最后打印 // 将工作簿日期设置...5 row.getCell('name').value = 'Zeb'; // B5 的值设置 “Zeb” - 假设第2列仍按名称键入 row.getCell('C').value = new Date...(); // C5 的值设置当前时间 // 获取行并作为稀疏数组返回 // 注意:接口更改:worksheet.getRow(4) ==> worksheet.getRow(4).values row...解析 AntD Table 的 columns 和 dataSource : // 根据 antd 的 column 生成 exceljs 的 column const DEFAULT_COLUMN_WIDTH

    5.3K30

    ExcelJS导出Ant Design Table数据Excel文件

    可以满足(但不限于)以下需求: 简单表格导出 表格添加样式(更改背景色、更换字体、字号、颜色) 设置行高、列宽 解析 ant-design 的 Table 直接导出 excel,根据 antd 页面中设置的列宽动态计算...workbook.modified = new Date(); // 修改日期 workbook.lastPrinted = new Date(2016, 9, 27); // 最后打印 // 将工作簿日期设置...5 row.getCell('name').value = 'Zeb'; // B5 的值设置 “Zeb” - 假设第2列仍按名称键入 row.getCell('C').value = new Date...(); // C5 的值设置当前时间 // 获取行并作为稀疏数组返回 // 注意:接口更改:worksheet.getRow(4) ==> worksheet.getRow(4).values row...解析 AntD Table 的 columns 和 dataSource : // 根据 antd 的 column 生成 exceljs 的 column const DEFAULT_COLUMN_WIDTH

    46930

    【源码解析+代码实现】一篇文章搞定 babel-plugin-import 插件

    但是,看一下们需要多个组件的时候: import { Affix, Avatar, Button, Rate } from 'antd'; import 'antd/lib/affix/style'...这时候就应该思考一下,如何在引入 Button 的时候自动引入它的样式文件。...What:这个插件做了什么 简单来说,babel-plugin-import 就是解决了上面的问题,组件库实现单组件按需加载并且自动引入其样式,: import { Button } from 'antd...以下面这段代码例: import { Button, Rate } from 'antd'; ReactDOM.render(xxxx); 第一步 依赖收集 babel-plubin-import...【Babel 插件入门】如何用 Babel 代码自动引入依赖 最简功能实现 按照上文说的,最重要的配置项就是三个: { "libraryName": "antd", "libraryDirectory

    1.5K10

    React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势

    ,因为我们接口需要传递时间戳,而是不带毫秒级的; 而且时间必须当天的凌晨00:00:00开始,结束时间到操作的此刻(直接new Date().getTime()就是此刻); // 会直接返回你设置时间的时间戳...找了下官方文档,发现有这么两个API: React.Children : 提供了几个遍历子元素(React Element)的方法,与常规数组用法类似,只是参数不一样 React.cloneElement: 名字所示...changeOrigin: true, secure: false, // pathRewrite: { '^/api': '/' }, }, }, }; 复制代码 ---- 如何在...就是缩小的时候隐藏部分子菜单,这个问题在我做侧边栏变水平的时候遇到.我缩小到ipad的尺寸 会溢出,用了常规的法子,就正常了,就是style那里设置一个最大宽度或者宽度 至于风格变化是因为antd内置了两套风格...this.onOpenChange} > 复制代码 当然Logo组件这些肯定是你自己拿了状态去变化的,还有包裹的父级区域的样式 目前不做配置保存,想做保存的,写在localStorage不失一个好法子

    3.3K20

    Form 表单在数栈的应用(上): 校验篇

    本文的重点 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。...众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开即用, API 详尽,但即便如此,antd 开发人员依然在当前基础上一遍又一遍地做优化和探索,所以,笔者希望通过本文不仅能带给大家业务上的小技巧...options 参数,设置 force true,让每一次“提交”(校验值)操作的之前都必须重走一遍所有校验逻辑。...首先是存在多层 form 嵌套的问题,也就是说同一个页面里可能还包含或嵌入多个 form 表单,类似问题的核心就在于如何在一个页面中拿到当前容器的 form 实例和嵌套的 form 示例。...对于 antd 4.x 的 form 校验,这里也做了一个简单的总结,有兴趣的同学可以移步 antd form 4.x 进行探究: 首先对于「声明式」校验有个改变: <Form.Item {...formItemLayout

    2.2K20

    Form 表单在数栈的应用(上): 校验篇

    本文的重点 Form 表单的校验及在数栈中的应用,偏向于应用总结与心得分享。...众所周知,我们生在一个最好的时代,antd 已经帮我们把绝大多数功能封装好了,即开即用, API 详尽,但即便如此,antd 开发人员依然在当前基础上一遍又一遍地做优化和探索,所以,笔者希望通过本文不仅能带给大家业务上的小技巧...options 参数,设置 force true,让每一次“提交”(校验值)操作的之前都必须重走一遍所有校验逻辑。...首先是存在多层 form 嵌套的问题,也就是说同一个页面里可能还包含或嵌入多个 form 表单,类似问题的核心就在于如何在一个页面中拿到当前容器的 form 实例和嵌套的 form 示例。...对于 antd 4.x 的 form 校验,这里也做了一个简单的总结,有兴趣的同学可以移步 antd form 4.x 进行探究: 首先对于「声明式」校验有个改变: <Form.Item {...formItemLayout

    1.3K20
    领券