React binds the antd input box, click the clear or OK button to clear the content of the input box

In fact, the implementation principle is the same as the two-way binding of vue, which is to monitor the onChange event of the input box, bind the value, and reset the value when the content of the input box changes.

Sample code: I have uniformly processed the emptying logic in the handleCancel function here, and you can adjust it yourself

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

Achieved effect: 

When you click OK or Cancel, it will be empty when you open it again: