在 React 中重置文件输入

作者

在 React 中重置文件输入

Reset a File input in React

要在 React 中重置文件输入，请将输入的值设置为null您的
handleChange函数，例如event.target.value = null. 将元素的
value属性设置为null重置文件输入。

应用程序.js
const App = () => {
  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);

    // 👇️ reset file input
    event.target.value = null;

    // 👇️ is now empty
    console.log(event.target.files);

    // 👇️ can still access file object here
    console.log(fileObj);
    console.log(fileObj.name);
  };


  return (
    <div>
      <input type="file" onChange={handleFileChange} />
    </div>
  );
};

export default App;

重置文件输入

对象的target属性event是对文件输入字段的引用。

我们可以通过将其设置为 来重置文件输入的值null。

请注意，我们将文件对象存储在一个变量中，因此即使在文件输入的值被重置后我们也可以访问它。

或者，您可以为文件输入分配一个 ref，这将允许您从任何地方重置它的值。

应用程序.js
import {useRef} from 'react';

const App = () => {
  // 👇️ create a ref for the file input
  const inputRef = useRef(null);

  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);
  };


  const resetFileInput = () => {
    // 👇️ reset input value
    inputRef.current.value = null;
  };

  return (
    <div>
      <input ref={inputRef} type="file" onChange={handleFileChange} />

      <button onClick={resetFileInput}>Reset file input</button>
    </div>
  );
};

export default App;

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop 的文件输入元素。 ref

当我们将 ref prop 传递给元素时，例如<input ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

现在每次单击按钮时，文件输入的值都会重置。

请注意，您现在可以从任何地方重置文件输入的值，因为我们可以通过 ref 从任何地方访问输入字段。

current对象上的属性inputRef指的是文件输入。

–

发表评论