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)} />
            }
        
      
    
  )
}

实现的效果： 

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