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

news2025/1/19 23:20:45

其实实现原理和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.coloradmin.cn/o/925760.html

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

相关文章

再写CentOS7升级OpenSSL-1.0.1U

本文在CentOS7.4以及TencentOS 2.4上测试通过。 原系统自带OpenSSL 1.0.2k-fips。 编译安装方法跟之前的没啥区别。 从官网下载1.0.1u版https://www.openssl.org/source/ 使用tar解包 tar xfz openssl-1.0.1u.tar.gz 依次执行如下&#xff1a; cd openssl-1.0.1u ./con…

pdf转ppt软件哪个好用?推荐一个好用的pdf转ppt软件

在日常工作和学习中&#xff0c;我们经常会遇到需要将PDF文件转换为PPT格式的情况。PDF格式的文件通常用于展示和保留文档的原始格式&#xff0c;而PPT格式则更适合用于演示和展示。为了满足这一需求&#xff0c;许多软件提供了PDF转PPT的功能&#xff0c;使我们能够方便地将PD…

成都优优聚做美团代运营还有市场吗?

成都优优聚公司是一家专注于美团代运营的企业。作为美团的第三方代运营商&#xff0c;公司致力于帮助商家提升线上形象&#xff0c;提高销售额&#xff0c;实现转型升级。在与美团合作的多年间&#xff0c;公司已积累了丰富的经验和优秀的专业团队。 作为一个代运营商&#xff…

VK0192是标准LCD显示面板/液晶显示屏驱动芯片(IC)-24SEG×8COM

产品品牌&#xff1a;永嘉微电/VINKA 产品型号&#xff1a;VK0192 封装形式&#xff1a;LQFP44 概述 VK0192是一个点阵式存储映射的LCD驱动器&#xff0c;可支持最大192点&#xff08;24SEGx8COM&#xff09; 的LCD屏。单片机可通过3/4线串行接口配置显示参数和发送显示数据…

恢复照片软件,记好这几个,照片恢复很简单!

“我真的很喜欢拍摄各种各样的照片&#xff0c;然后在电脑上进行修图。但是吧&#xff01;我比较马虎&#xff0c;在挑选照片时经常会误删一些很好看的照片。真的很需要一款专门恢复照片的软件&#xff0c;想问问有什么好的推荐吗&#xff1f;” 无意中删除了重要的照片真的会让…

GE 8920-PS-DC安全模块

安全控制&#xff1a; 这个安全模块通常用于实现工业自动化系统中的安全控制功能。它可以监测各种安全参数&#xff0c;如机器运动、温度、压力等&#xff0c;以确保系统在安全范围内运行。 PLC兼容性&#xff1a; 通常&#xff0c;这种安全模块可以与可编程逻辑控制器&#x…

Cesium 使用 Entity 绘制点线面

文章目录 一、绘制点1. 第一种2. 第二种 二、绘制面三、绘制线四、移除 Entity <!--* Author: HuKang* Date: 2023-08-18 11:06:43* LastEditTime: 2023-08-25 09:16:59* LastEditors: HuKang* Description: program-c* FilePath: \global-data-display\src\views\program-c…

图像读取、显示与保存

一、图像读取 二、图像显示 namedWindow(const String &winname, int flags WINDOW_AUTOSIZE) imshow(const String &winname, InputArray mat) 三、图像保存 #include <opencv2/opencv.hpp> //the basic building blocks of the library #include <…

黑客炼成手册

一、什么是网络安全&#xff1f;什么是黑客&#xff1f; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等…

Nature重大突破:科学家成功完成Y染色体测序,标志着人类基因组的完整解读

这张扫描电子显微镜图像显示了一对连接的Y染色体&#xff08;右&#xff09;与一对连接的X染色体相比&#xff0c;在细胞分裂前期时重复的Y染色体&#xff08;右&#xff09;小了多少。图片来源&#xff1a;BIOPHOTO ASSOCIATES/SCIENCE SOURCE 长期以来&#xff0c;Y染色体的全…

Hugo快速创建和发布网站

你应该先阅读Windows上安装Hugo的环境。 我们使用PowerShell运行下面的Hugo命令。 1 创建网站 我们在文档下面创建一个名为MyHugoSite的目录结构&#xff1a; cd Documents hugo new site MyHugoSite cd MyHugoSite提示告诉我们有关主题的获取方式、文件的添加和站点的构建。…

uni.uploadFile上传 PHP接收不到

开始这样&#xff0c;后端$file $request->file(file);接收不到 数据跑到param中去了 去掉Content-Type&#xff0c;就能接收到了 param只剩下

maven可用的插件列表

maven可用的插件列表&#xff1a;https://maven.apache.org/plugins/ 在插件列表页面找到自己想要了解的插件&#xff0c;点击进去&#xff0c;可以看到插件的详细信息&#xff0c;例如这个插件有哪些goals&#xff0c;goal的参数、用法、样例等&#xff0c;还是很有用的。 B…

Python支持下最新Noah-MP陆面模式站点、区域模拟及可视化分析技术

查看原文>>> Python支持下最新Noah-MP陆面模式站点、区域模拟及可视化分析技术 熟悉陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用&#xff1b;深入理解Noah-MP 5.0模型的原理&#xff0c;掌握Noah-MP模型&#xff08;2023年最新发布的5.0版本&am…

【云卓笔记】mavlink java文件

根据飞控提供的xml文件来生成的 生成的就是这样的java文件 准备工作: Mavlink协议生成 参考 1.安装mavlink : 使用MAVLink工具的要求是 Python 3.3 (recommended) or Python 2.7 Python future模块 (可选) PythonTklnter模块(如果需要使用图形用户界面)。 环境变量PYTHO…

容器进阶操作

查看容器信息 容器创建成功后&#xff0c;用户可以通过docker inspect命令查看容器的详细信息&#xff0c;这些详细信息包括容器的id、容器名、环境变量、运行命令、主机配置、网络配置以及数据卷配置等信息。执行部分结果如下图&#xff1a; 使用format参数可以只查看用户关心…

浅谈视频汇聚平台EasyCVR视频平台在城市安全综合监测预警台风天气中的重要作用

夏日已至&#xff0c;台风和暴雨等极端天气频繁出现。在城市运行过程中&#xff0c;台风所带来的暴雨可能会导致城市内涝等次生灾害&#xff0c;引发交通瘫痪、地铁停运、管网泄漏爆管、路面塌陷、防洪排涝、燃气爆炸、供热安全、管廊安全、消防火灾等安全隐患&#xff0c;影响…

IEC61499/ OPCUA 融合(1)功能块通信的PUB/SUB协议

OpenDACS 是基于OPCUA 信息模型的IEC61499 分布式自动控制系统。用于研究OPCUA 与IEC61499 相互融合。本文介绍它如何采用Opcua Pub/Sub 实现分布式系统中IEC61499功能块之间的通信。在IEC61499 中并没有明确地确定采取哪一种协议&#xff0c;在具体实现中可能采取TCP/IP,UDP …

CVE-2016-3088漏洞复现

1.背景介绍。 ActiveMQ的web控制台分三个应用&#xff0c;admin、api和fileserver&#xff0c;其中admin是管理员页面&#xff0c;api是接口&#xff0c;fileserver是储存文件的接口&#xff1b;admin和api都需要登录后才能使用&#xff0c;fileserver无需登录。 fileserver是…

解析跨境电商环境下的撸卡、撸货等业务运作模式

随着亚马逊在国内用户中的流行&#xff0c;越来越多的人做亚马逊测评自养号&#xff0c;作为一个传统的跨境电商平台&#xff0c;亚马逊上有许多进口商品可供购买&#xff0c;在购物过程中&#xff0c;有的是用信用卡下单&#xff0c;有的是用礼品卡下单&#xff0c;也会有一些…