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…

javaee spring配置文件bean标签详解

<bean id"drink_01" name"drink_02" scope"singleton"lazy-init"true"init-method"init" destroy-method"destroy"class"com.test.pojo.Drink" />scope属性 bean标签中添加scope属性,设置bean对…

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的参数量…

【SA8295P 源码分析】83 - SA8295P HQNX + Android 完整源代码下载方法介绍

【SA8295P 源码分析】83 - SA8295P HQNX + Android 完整源代码下载方法介绍 一、高通官网 Chipcode 下载步骤介绍1.1 高通Chipcode 下载步骤1.2 高通 ReleaseNote 下载方法二、高通 HQX 代码介绍2.1 完整的 HQX 代码结构:sa8295p-hqx-4-2-4-0_hlos_dev_qnx.tar.gz2.2 sa8295p-…

CodeLlama本地部署的实战方案

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

iOS开发Swift-控制流

1.For-In循环 //集合循环 let names ["a", "b", "c"] for name in names {print("Hello, \(name)!") } //次数循环 for index in 1...5{print("Hello! \(index)") } //不需要值时可以使用 _ 来忽略此值 for _ in 1...5{…

00-音视频-概述

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

STM32 Cubemx配置串口收发

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

【Nginx20】Nginx学习:FastCGI模块(二)缓存配置

Nginx学习&#xff1a;FastCGI模块&#xff08;二&#xff09;缓存配置 通过上篇文章的学习&#xff0c;普通的 PHP 与 Nginx 的连接就已经没啥大问题了。一般的网站直接那套配置就够了&#xff0c;这也是 Nginx 非常友好的一面。很多在默认的配置文件中注释掉的内容&#xff0…

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 本文针对该代码…

面试题. 搜索旋转数组

搜索旋转数组。给定一个排序后的数组&#xff0c;包含n个整数&#xff0c;但这个数组已被旋转过很多次了&#xff0c;次数不详。请编写代码找出数组中的某个元素&#xff0c;假设数组元素原先是按升序排列的。若有多个相同元素&#xff0c;返回索引值最小的一个。 示例1: 输入…

LeetCode416. 分割等和子集

416. 分割等和子集 文章目录 [416. 分割等和子集](https://leetcode.cn/problems/partition-equal-subset-sum/)一、题目二、题解方法一&#xff1a;0-1背包二维数组方法二&#xff1a;0-1背包一维数组 一、题目 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将…