Javascript 函数组件不能有引用。你的意思是使用 React.forwardRef() 吗？

Function components cannot have refs. Did you mean to use React.forwardRef()?

提问by user944513

Hi I am trying to choose file form my computer and display the file name on input field but I am getting this error

嗨，我正在尝试从我的计算机中选择文件并在输入字段上显示文件名，但出现此错误

Function components cannot have refs. Did you mean to use React.forwardRef()

函数组件不能有引用。你的意思是使用 React.forwardRef()

https://stackblitz.com/edit/react-aogwkt?file=bulk.js

https://stackblitz.com/edit/react-aogwkt?file=bulk.js

here is my code

这是我的代码

import React, { Component } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import Attachment from "@material-ui/icons/Attachment";
import CloudDownload from "@material-ui/icons/CloudDownload";
const BulkUpload = props => {
  const { classes } = props;
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={'abc'}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
              // this.refs['abc'].click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

I just wanted to show selected file name on input field

我只想在输入字段上显示选定的文件名

回答by Shubham Khatri

If you are using v16.8.0or above of react you can make use of hooks useRefmethod to define a ref and use it

如果您正在使用v16.8.0或高于 react，您可以使用 hooksuseRef方法来定义 ref 并使用它

import React, { Component, useRef } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import Attachment from "@material-ui/icons/Attachment";
import CloudDownload from "@material-ui/icons/CloudDownload";
const BulkUpload = props => {
  const { classes } = props;
  const inputRef = useRef(null);
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef }
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                 inputRef.current.click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

If you are using a lower version between v16.3.0 and v16.8.0, you can make use of React.createRef

如果您使用的是 v16.3.0 和 v16.8.0 之间的较低版本，则可以使用 React.createRef

const BulkUpload = props => {
  const { classes } = props;
  const inputRef = React.createRef(null);
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                 inputRef.current.click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

Or else if you are using an even lower version then you need to convert your component into class component and use ref using callback refs like

否则，如果您使用的是更低版本，那么您需要将您的组件转换为类组件并使用 ref 使用回调引用，例如

class BulkUpload extends Component {
   render() {
      const { classes } = this.props;
      return (
        <div className="App">
          <input
            id="file_input_file"
            className="none"
            type="file"
            ref={(ref) => this.inputRef = ref}
          />
          <Input
            id="adornment-attachment"
            type="text"
            fullWidth

            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={e => {
                     this.inputRef.click();
                  }}
                  className="login-container__passwordIcon"
                >
                  <Attachment />
                </IconButton>
              </InputAdornment>
            }
          />
        </div>
      );
    };
}

export default BulkUpload;

回答by ManavM

The problem here is that you are using a veryoutdated method of using refs. You need to change your code to something like this

这里的问题是您使用了一种非常过时的使用 refs 的方法。你需要把你的代码改成这样

const BulkUpload = props => {
  const { classes } = props;
  let inputRef = React.createRef();
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                inputRef.current.click()
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};