React绑定antd输入框,点击清空或者确定按钮实现清空输入框内容

其实实现原理和vue的双向绑定是一样的,就是监听输入框的onChange事件,绑定value值,当输入框内容发生变化后,就重新设置这个value值。

示例代码:我这里是统一在handleCancel这个函数里面处理清空逻辑了,你们可以自行调整

import { Input, Modal } from 'antd';
import { useState } from 'react';
import "./index.scss"export default function NewFile({ isShow, setShow, newType }) {const [fileName, setFileName] = useState("")const [dirName, setdirName] = useState("")const [dirDigest, setdirDigest] = useState("")const handleOk = () => {setShow(false);newType === 1 ? creatFile() : creatDir()};// 新建文件const creatFile = () => {console.log("新建文件", fileName);handleCancel()}// 新建文件夹const creatDir = () => {console.log("新建文件夹", dirName, dirDigest);handleCancel()}const handleCancel = () => {setShow(false);setdirName("")setFileName("")setdirDigest("")console.log("newType", newType);};return (<div><Modal title={newType === 1 ? "新建文件" : "新建文件夹"} open={isShow} onOk={handleOk} onCancel={handleCancel} ><div className='content'>{newType === 1 ?<div className='form-line'><span className='label'>文件名:</span><Input placeholder="请输入文件名" key="fileName" value={fileName}onChange={e => setFileName(e.target.value)} /></div>:<><div className='form-line'><span className='label'>文件夹:</span><Input placeholder="请输入文件夹名称" key="dirName" value={dirName}onChange={e => setdirName(e.target.value)} /></div><div className='form-line'><span className='label'>描&nbsp;&nbsp;&nbsp;&nbsp;述:</span><Input placeholder="请输入描述内容" key="dirDigest" value={dirDigest}onChange={e => setdirDigest(e.target.value)} /></div></>}</div></Modal></div>)
}

实现的效果: 

当点击确定或者取消之后,再次打开就会是空内容: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/54406.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【大数据】Doris:基于 MPP 架构的高性能实时分析型数据库

Doris&#xff1a;基于 MPP 架构的高性能实时分析型数据库 1.Doris 介绍 Apache Doris 是一个基于 MPP&#xff08;Massively Parallel Processing&#xff0c;大规模并行处理&#xff09;架构的高性能、实时的分析型数据库&#xff0c;以极速易用的特点被人们所熟知&#xff…

Elasticsearch 入门安装

1.Elasticsearch 是什么 The Elastic Stack, 包括 Elasticsearch、 Kibana、 Beats 和 Logstash&#xff08;也称为 ELK Stack&#xff09;。能够安全可靠地获取任何来源、任何格式的数据&#xff0c;然后实时地对数据进行搜索、分析和可视化。 Elaticsearch&#xff0c;简称为…

[NLP]LLM--transformer模型的参数量

1. 前言 最近&#xff0c;OpenAI推出的ChatGPT展现出了卓越的性能&#xff0c;引发了大规模语言模型(Large Language Model, LLM)的研究热潮。大规模语言模型的“大”体现在两个方面&#xff1a;模型参数规模大&#xff0c;训练数据规模大。以GPT3为例&#xff0c;GPT3的参数量…

CodeLlama本地部署的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

00-音视频-概述

有很多场合会使用的音视频&#xff0c;比如安防、视频闸机、影音播放器、视频通话&#xff0c;短视频等等。 从摄像头采集到用户观看&#xff0c;这中间涉及到了很多技术。 用户一般观看的高清视频1080P30帧。若按24位RGB对视频进行存储&#xff0c;一个60分钟视频所占空间 …

STM32 Cubemx配置串口收发

文章目录 前言注意事项Cubemx配置printf重定向修改工程属性修改源码 测试函数 前言 最近学到了串口收发&#xff0c;简单记录一下注意事项。 注意事项 Cubemx配置 以使用USART1为例。 USART1需配置成异步工作模式Asynchronous。 并且需要使能NVIC。 printf重定向 我偏向…

JMeter 接口自动化测试:从入门到精通的完全指南

JMeter 是一个开源的负载测试工具&#xff0c;它可以模拟多种协议和应用程序的负载&#xff0c;包括 HTTP、FTP、SMTP、JMS、SOAP 和 JDBC 等。在进行接口自动化测试时&#xff0c;使用 JMeter 可以帮助我们快速地构建测试用例&#xff0c;模拟多种场景&#xff0c;发现接口的性…

论文阅读_条件控制_ControlNet

name_en: Adding Conditional Control to Text-to-Image Diffusion Models name_ch: 向文本到图像的扩散模型添加条件控制 paper_addr: http://arxiv.org/abs/2302.05543 date_read: 2023-08-17 date_publish: 2023-02-10 tags: [‘图形图像’,‘大模型’,‘多模态’] author: …

什么是计算机视觉,计算机视觉的主要任务及应用

目录 1. 什么是计算机视觉 2. 计算机视觉的主要任务及应用 2.1 图像分类 2.1.1 图像分类的主要流程 2.2 目标检测 2.2.1 目标检测的主要流程 2.3 图像分割 2.3.1 图像分割的主要流程 2.4 人脸识别 2.4.1 人脸识别的主要流程 对于我们人类来说&#xff0c;要想认出身边…

生成地图展示【Python思路】

# 1.导包 import json from pyecharts.charts import Map #导入关于编写地图的包 from pyechart.options import * #全局设置# 2.得到地图对象 map Map()# 3.打开事先准备好的JSON数据文件 f open("D:/Typora 记事本/notebook/Python/Exercise_data/疫情.txt",&…

三个视角解读ChatGPT在教学创新中的应用

第一&#xff0c;我们正处于一个学生使用ChatGPT等AI工具完成作业的时代&#xff0c;传统的教育方法需要适应变化。 教育工作者不应该因为学生利用了先进技术而惩罚他们&#xff0c;相反&#xff0c;应该专注于让学生去挑战超越AI能力范围的任务。这需要我们重新思考教育策略和…

matlab使用教程(25)—常微分方程(ODE)选项

1.ODE 选项摘要 解算 ODE 经常要求微调参数、调整误差容限或向求解器传递附加信息。本主题说明如何指定选项以及每个选项与哪些微分方程求解器兼容。 1.1 选项语法 使用 odeset 函数创建 options 结构体&#xff0c;然后将其作为第四个输入参数传递给求解器。例如&#xff0…

Folyd 多源最短路

目录 简介 实现 代码 关于Floyd的题目 简介 首先我们要知道a到b的最短路是什么 a到b的最短路是从a点到b点的最小距离&#xff08;花费&#xff09; 那多源最短路呢就是能求任意a和b&#xff0c;之间的最短路 那么Folyd是多源最短路&#xff0c;也就是求任意a和b&#x…

python实现卡尔曼滤波代码详解

Kalman滤波算法的原理可以参考&#xff1a; 卡尔曼滤波理解 python中filterpy库中实现了各种滤波算法&#xff0c; 其中就包括了kalman滤波算法。 具体实现代码&#xff1a; https://github.com/rlabbe/filterpy/blob/master/filterpy/kalman/kalman_filter.py 本文针对该代码…

视频云存储/安防监控EasyCVR视频汇聚平台接入GB国标设备时,无法显示通道信息该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

三极管NPN、PNP的区别及简单应用

目录 一、NPN、PNP三极管的概念 二、NPN、PNP三极管的区别 三、三极管NPN、PNP的简单应用 一、NPN、PNP三极管的概念 NPN型三极管&#xff1a; 由两块N型半导体和一块P型半导体组成&#xff0c;P型半导体在中间&#xff0c;两块N型半导体在两侧。 三极管是电子电路中最重要的…

elementui table 在浏览器分辨率变化的时候界面异常

异常点&#xff1a; 界面显示不完整&#xff0c;表格卡顿&#xff0c;界面已经刷新完成&#xff0c;但是表格的宽度还在一点一点变化&#xff0c;甚至有无线延伸的情况 思路&#xff1a; 1. 使用doLayout 这里官方文档有说明&#xff0c; 所以我的想法是&#xff0c;监听浏览…

Jetbrains IDE新UI设置前进/后退导航键

背景 2023年6月&#xff0c;Jetbrains在新发布的IDE&#xff08;Idea、PyCharm等&#xff09;中开放了新UI选项&#xff0c;我们勾选后重启IDE&#xff0c;便可以使用这一魔性的UI界面了。 但是前进/后退这对常用的导航键却找不到了&#xff0c;以前的设置方式&#xff08;Vi…

【C++】容器适配器stack、queue以及deque容器

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录 前言一、什么是容器适配器1.1 stack的…

Redis 的混合持久化

RDB 相比于 AOF&#xff0c;数据恢复的速度更快&#xff0c;因为是二进制数据&#xff0c;直接加载进内存即可&#xff0c;但是 RDB 的频率不好把握。 如果频率太低&#xff0c;在两次快照期间服务器发生宕机&#xff0c;可能会丢失较多的数据如果频率太高&#xff0c;频繁写入…