htmlFor 用於輸入文件 label 顯示

Question

我試圖為輸入類型=文件設置自定義顯示，但是選擇 id 的 htmlFor 不起作用。

默認情況下 input type=file 顯示為

Choose file(as button) - no file selected

我正在嘗試將這些名稱“選擇文件”和“未選擇文件”更改為我的自定義顯示，我該如何實現？ 我嘗試使用 htmlFor 選擇輸入字段的 id，但沒有成功。 我嘗試使用 label 屬性，但文本位於“選擇文件”按鈕的頂部。

到目前為止，這是我的試用：

 <label className="form-label" htmlFor='input-file'> select.....</label>
                        <input
                             className="form-control form-control-lg form-control-solid"
                             type="file"
                             id="input-file"
                             name="thumbnailImg"
                             value={undefined}
                             onChange={(e) => file_choosen(e)}
                           />

output 是這樣的：

select...
[Choose File] [no file selected]

我正在嘗試顯示類似的內容：

[select...] [***custom no file selected here***]

Answer 1

如果您不想使用默認輸入元素，那么您需要：

1. 隱藏輸入元素
2. 使用您可以根據自己的意願設置樣式的按鈕
3. 單擊然后觸發輸入文件單擊

import { useRef, useState } from "react";

export default function App() {
  const ref = useRef();
  const [file, setFile] = useState(null);

  function file_chosen() {
    setFile(ref.current.files[0]);
  }
  return (
    <div>
      <div style={{ display: "flex", flexDirection: "row", gap: 4 }}>
        <button onClick={() => ref.current.click()}>Select file</button>
        <p>{file === null ? "No file chosen" : "1 file selected"}</p>
      </div>
      <input
        onChange={file_chosen}
        ref={ref}
        type="file"
        style={{ display: "none" }}
      />
    </div>
  );
}

codesandbox 示例