React 修改input按钮上文字

设置另一个button和text替代input file，隐藏input file。

            <input
                type="file"
                id="tts-input-text"
                accept="text/plain"
                onChange={readFile}
                onClick={(e: any) => (e.target.value = null)} />
            <input
                type="button"
                id="tts-input-button"
                value="Select recording script"
                onClick={() => document.getElementById('tts-input-text').click()} />
            <input type="text" value={file.name} id="tts-inputFileAgent" />

css：

    #tts-input-text {
        display: none;
    }

或者使用useRef

  const filesInput = useRef(null) as React.RefObject<HTMLInputElement>;
  const acceptType = ".txt";

            <DefaultButton
              onClick={() => filesInput.current.click()}
              className="browse-files-button"
            >
              Browse files...
              <input type="file" onChange={readFile} ref={filesInput} accept={acceptType} />
            </DefaultButton>