Question

我试图将这种简单的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()一起使用？我在这里做错了什么？请帮忙。谢谢！

Answer 1

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

这就是我们在React中做到的方式。

Answer 2

将fileElem.current.click()更改为fileElem.current.click。使用括号将您调用在引用上的单击功能，使其立即被单击，然后将返回值分配给React元素的onClick处理程序。相反，您想将fileElem的点击处理程序分配给React元素的点击处理程序。

Answer 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。

使用useRef钩子将纯JS转换为React.js

3 个答案: