潍坊模板开发建站,合肥网站建设求职简历,桂林官网,网站建设是干什么的其实实现原理和vue的双向绑定是一样的#xff0c;就是监听输入框的onChange事件#xff0c;绑定value值#xff0c;当输入框内容发生变化后#xff0c;就重新设置这个value值。
示例代码#xff1a;我这里是统一在handleCancel这个函数里面处理清空逻辑了#xff0c;你们…其实实现原理和vue的双向绑定是一样的就是监听输入框的onChange事件绑定value值当输入框内容发生变化后就重新设置这个value值。
示例代码我这里是统一在handleCancel这个函数里面处理清空逻辑了你们可以自行调整
import { Input, Modal } from antd;
import { useState } from react;
import ./index.scssexport 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 (divModal title{newType 1 ? 新建文件 : 新建文件夹} open{isShow} onOk{handleOk} onCancel{handleCancel} div classNamecontent{newType 1 ?div classNameform-linespan classNamelabel文件名:/spanInput placeholder请输入文件名 keyfileName value{fileName}onChange{e setFileName(e.target.value)} //div:div classNameform-linespan classNamelabel文件夹:/spanInput placeholder请输入文件夹名称 keydirName value{dirName}onChange{e setdirName(e.target.value)} //divdiv classNameform-linespan classNamelabel描nbsp;nbsp;nbsp;nbsp;述:/spanInput placeholder请输入描述内容 keydirDigest value{dirDigest}onChange{e setdirDigest(e.target.value)} //div/}/div/Modal/div)
}实现的效果
当点击确定或者取消之后再次打开就会是空内容
