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

Question

您好，我正在尝试从计算机中选择文件并在输入字段中显示文件名，但收到此错误

函数组件不能有引用。您是否打算使用 React.forwardRef()

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

这是我的代码

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;

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

Answer 1

如果您使用的是 v16.8.0 或更高版本的 React，您可以使用 hooks useRef 方法来定义引用并使用它

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;

如果您使用的是 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;

否则，如果您使用的是更低版本，那么您需要将组件转换为类组件，并使用回调引用来使用 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;