使用 useRef 挂钩将普通 JS 转换为 React.js答案

【问题标题】：Converting plain JS to React.js using useRef hook使用 useRef 挂钩将普通 JS 转换为 React.js
【发布时间】：2020-09-23 16:47:40
【问题描述】：

我尝试将这个普通的 javascript 转换为使用 useRef 钩子做出反应。

普通 JS： https://codesandbox.io/s/friendly-maxwell-ub18w?file=/src/index.js

反应：https://codesandbox.io/s/dry-frog-urzjp?file=/src/App.js

export default function App() {
  const fileElem = useRef(null);

  return (
    <div className="App">
      <input
        id="fileElem"
        multiple
        accept="image/*"
        style={{ display: "none" }}
      />
      <button onClick={() => fileElem.current.click()}>
        Select some files
      </button>
    </div>
  );
}

为什么 useRef 不能与 fileElem.current.click() 一起使用？我在这里做错了什么？请帮忙。谢谢！

【问题讨论】：

请在您的问题/问题中发布相关代码（除了链接），如有必要，请提供适当的复制步骤。 how to ask

标签： javascript reactjs formik

【解决方案1】：

在您的输入中而不是使用id='fileElem' 使用ref={fileElem}，它应该可以正常工作。

这就是我们在 React 中的做法。

【讨论】：

【解决方案2】：

将fileElem.current.click() 更改为fileElem.current.click。使用括号，您正在调用 ref 上的 click 函数，这会导致它立即被单击，然后将返回值分配给 React 元素的 onClick 处理程序。相反，您希望将 fileElem 的点击处理程序分配给 React 元素的点击处理程序。

【讨论】：

【解决方案3】：

需要使用ref={fileElem}和type="file"，如下图：

<input
  type="file"
  ref={fileElem}
  multiple
  accept="image/*"
  style={{ display: 'none' }}
/>
<button onClick={() => fileElem.current.click()}>
  Select some files
</button>

查看this了解如何使用ref。

【讨论】：