函数组件不能有引用.你的意思是使用 React.forwardRef() 吗?
[英] Function components cannot have refs. Did you mean to use React.forwardRef()?
本文介绍了函数组件不能有引用.你的意思是使用 React.forwardRef() 吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从我的计算机中选择文件并在输入字段中显示文件名，但出现此错误
函数组件不能有引用.你的意思是使用 React.forwardRef()
https://stackblitz.com/edit/react-aogwkt?file=批量.js
这是我的代码
import React, { Component } from "react";进口 {按钮，对话，对话动作，对话内容，对话标题，表单控件，图标按钮，输入，输入装饰，带样式来自@material-ui/core"；从@material-ui/icons/Attachment"导入附件；从@material-ui/icons/CloudDownload"导入 CloudDownload；const BulkUpload = props =>{const { 类} = 道具；返回 (<div className="应用程序"><输入id="file_input_file"类名=无"类型=文件"ref={'abc'}/><输入id="装饰附件"类型=文本"全屏宽度结束装饰={<InputAdornment position="end"><图标按钮aria-label="切换密码可见性"onClick={e =>{//this.refs['abc'].click();}}className="登录容器__passwordIcon"><附件/></图标按钮></InputAdornment>}/>
);};导出默认批量上传；
我只想在输入字段中显示选定的文件名
解决方案
如果你使用的是 v16.8.0 或以上的 react 可以使用 hooks useRef 方法定义一个引用并使用它
import React, { Component, useRef } from "react";进口 {按钮，对话，对话动作，对话内容，对话标题，表单控件，图标按钮，输入，输入装饰，带样式来自@material-ui/core"；从@material-ui/icons/Attachment"导入附件；从@material-ui/icons/CloudDownload"导入 CloudDownload；const BulkUpload = props =>{const { 类} = 道具；const inputRef = useRef(null);返回 (<div className="应用程序"><输入id="file_input_file"类名=无"类型=文件"参考={输入参考}/><输入id="装饰附件"类型=文本"全屏宽度结束装饰={<InputAdornment position="end"><图标按钮aria-label="切换密码可见性"onClick={e =>{inputRef.current.click();}}className="登录容器__passwordIcon"><附件/></图标按钮></InputAdornment>}/>
);};导出默认批量上传；
如果你使用的是 v16.3.0 和 v16.8.0 之间的低版本，你可以使用 React.createRef
const BulkUpload = props =>{const { 类} = 道具；const inputRef = React.createRef(null);返回 (<div className="应用程序"><输入id="file_input_file"类名=无"类型=文件"参考={输入参考}/><输入id="装饰附件"类型=文本"全屏宽度结束装饰={<InputAdornment position="end"><图标按钮aria-label="切换密码可见性"onClick={e =>{inputRef.current.click();}}className="登录容器__passwordIcon"><附件/></图标按钮></InputAdornment>}/>
);};导出默认批量上传；
否则，如果您使用的版本更低，则需要将组件转换为类组件并使用 ref 使用回调引用，例如
class BulkUpload 扩展组件 {使成为() {const { 类} = this.props;返回 (<div className="应用程序"><输入id="file_input_file"类名=无"类型=文件"ref={(ref) =>this.inputRef = ref}/><输入id="装饰附件"类型=文本"全屏宽度结束装饰={<InputAdornment position="end"><图标按钮aria-label="切换密码可见性"onClick={e =>{this.inputRef.click();}}className="登录容器__passwordIcon"><附件/></图标按钮></InputAdornment>}/>
);};}导出默认批量上传；
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()
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
解决方案
If you are using v16.8.0 or above of react you can make use of hooks useRef method to define a ref and use it
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
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
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;
这篇关于函数组件不能有引用.你的意思是使用 React.forwardRef() 吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
