经纬

使用Semantic UI React的Input来实现文件上传，感觉有点不够好看、

import { Input } from "semantic-ui-react";

const Component = () => <Input type='file' />

export default Component;

那么，如果隐藏Input，当点击Button时，通过ref来点击Input，以便可以选择文件。

import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    };

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <Input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    );
}

export default Component;

环境

调查1：调查一下ref.current.click是否真的不是一个函数。

由于在参考网站上可用，所以按照参考内容，尝试使用input标签并使用ref。

import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            {/* <Input type='file' ref={ref} style={{ display: 'none' }} /> */}
            <input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    )
}

export default Component;

→由于顺利运作，无法通过输入的引用(ref)执行点击操作。

解决方案1：不使用输入，而是直接将ref传递给内部的input。

将本文所讨论的内容应用

import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <Input type='file' style={{ display: 'none' }}>
                <input ref={ref} />
            </Input>
        </>
    )
}

export default Component;

解决方案2：使用HTML的for和id属性进行关联。

import { Input, Label } from "semantic-ui-react";

const Component = () => {
    return (
        <>
            <Label as='label' htmlFor='file-upload'>ファイルを選択</Label>
            <Input type='file' style={{ display: 'none' }} id='file-upload' />
        </>
    )
}

export default Component;

选项1: 第三个解决策是使用小写的input而不是Input来表示非表示的概念。

import { useRef } from "react";
import { Button } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    )
}

export default Component;