其實(shí)實(shí)現(xiàn)原理和vue的雙向綁定是一樣的，就是監(jiān)聽輸入框的onChange事件，綁定value值，當(dāng)輸入框內(nèi)容發(fā)生變化后，就重新設(shè)置這個value值。

示例代碼：我這里是統(tǒng)一在handleCancel這個函數(shù)里面處理清空邏輯了，你們可以自行調(diào)整

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="請輸入描述內(nèi)容" key="dirDigest" value={dirDigest}
                  onChange={e => setdirDigest(e.target.value)} /></div>
            </>}
        </div>
      </Modal>
    </div>
  )
}

實(shí)現(xiàn)的效果：?

當(dāng)點(diǎn)擊確定或者取消之后，再次打開就會是空內(nèi)容：?