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 ({newType === 1 ?文件名: setFileName(e.target.value)} />:<>文件夹: setdirName(e.target.value)} />描 述: setdirDigest(e.target.value)} />} )
}
实现的效果：
当点击确定或者取消之后，再次打开就会是空内容： 
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！