为什么 CurrencyTextField return 中的 inputRef 错误 inputRef.current 为空？

Question

我正试图在第一个 'CurrentTextField' 更改您的值后专注于第二个 'CurrentTextField'，但是 return 错误 'inputRef.current is null'

import React, {useRef } from 'react';
import CurrencyTextField from "@unicef/material-ui-currency-textfield";

export default function Clientes() {
   let refInput = useRef(null)

   return(
      <div>
         <CurrencyTextField 
          onChange={(e) => refInput.current.focus()}
         />

         <CurrencyTextField 
          inputRef={refInput}
         />
      </div>
   )
}

Answer 1

这看起来有点奇怪。我查看了 React 文档，看起来不错 useRef React。也许可以为我们提供有关图书馆的更多详细信息，因为也许与您的问题有关

Answer 2

更新 2

我再次检查发现它使用了 material-ui/core 中的 TextField 组件，它有一个 inputProps 属性，所以这会起作用

  <CurrencyTextField inputProps={{ref:refInput}} />

更新

我刚刚检查了 CurrencyTextField 源代码，它不处理 refs

由于您使用的是自定义组件 CurrencyTextField，您应该检查它是否处理引用，当使用普通 HTML 标签时，您将使用属性 ref

export default function Clientes() {
   let refInput = useRef(null)

   return(
      <div>
         <CurrencyTextField 
          onChange={(e) => refInput.current.focus()}
         />

         <-- normal input will work -->
         <input  
          ref={refInput}
         />
      </div>
   )
}

尝试像普通 HTML 标签那样做，看看它是否有效。

为什么 CurrencyTextField return 中的 inputRef 错误 inputRef.current 为空？

Why inputRef in CurrencyTextField return the error inputRef.current is null?

javascript

focus

input

reactjs