javascript - 如何将外部引用传递给 Material UI 自动完成组件？

Question

使用 Material UI 4.11.1，Autocomplete有一个renderInput渲染输入元素的方法，例如通常是一个TextField组件，但是它已经提供了ref值inputProps。因此，覆盖refprop 将导致Autocomplete失败，因为它的原始 prop 从未从输入元素接收到值，它是null.

那么，如何获取组件ref生成的Autocomplete内容并将其提供给父级？

本质上 ：

const LocalAutoComplete = forwardRef(({
   loading,
   options,
   TextFieldProps,
   ...props
}, ref) => {
   const { 
      inputProps: userinputProps = {}, 
      InputProps: userInputProps = {}, 
      ...userTextFieldProps
   } = TextFieldProps || {};

   return (
      <Autocomplete
         freeSolo
         { ...props }
         loading={loading}
         disablePortal={ false }
         options={options}
         
         PaperComponent={CustomPaper}

         renderInput={({ 
            inputProps: paramsinputProps,    // ref = paramsInputProps.ref ???
            InputProps: paramsInputProps,
            ...paramsTextFieldProps
         }) => (
            <TextField
               {...paramsTextFieldProps}
               {...userTextFieldProps}
               InputProps={{
                  ...paramsInputProps,
                  ...userInputProps,
                  endAdornment: (<>                     
                     {loading ? <CircularProgress color="inherit" size={20} /> : null}
                     {paramsInputProps.endAdornment}
                  </>),
               }}
               inputProps={{
                  ...paramsinputProps,
                  ...userinputProps
               }}
            />
         )}
      />
   );
});

总之，有paramsInputProps.ref === ref，不知何故。

---

** 更新 **

这似乎有效，但肯定有更好的方法！

const LocalAutoComplete = forwardRef(({
   loading,
   options,
   TextFieldProps,
   ...props
}, ref) => {
   const wtfRef = useRef();

   const { 
      inputProps: userinputProps = {}, 
      InputProps: userInputProps = {}, 
      ...userTextFieldProps
   } = TextFieldProps || {};

   // lolz...
   useImperativeHandle(ref, () => wtfRef.current?.current, []);

   return (
      <Autocomplete
         freeSolo
         { ...props }
         loading={loading}
         disablePortal={ false }
         options={options}
         
         PaperComponent={CustomPaper}

         renderInput={({ 
            inputProps: {
               ref,
               ...paramsinputProps
            },
            InputProps: {
               endAdornment,
               ...paramsInputProps
            },
            ...paramsTextFieldProps
         }) => (
            <TextField
               {...paramsTextFieldProps}
               {...userTextFieldProps}
               InputProps={{
                  ...paramsInputProps,
                  ...userInputProps,
                  endAdornment: (<>                     
                     {loading ? <CircularProgress color="inherit" size={20} /> : null}
                     {endAdornment}
                  </>),
               }}
               inputProps={{
                  ref: wtfRef.current = ref,  // lolz again...
                  ...paramsinputProps,
                  ...userinputProps
               }}
            />
         )}
      />
   );
});

标签： javascriptreactjsmaterial-ui