React - 輸入類型文件 Semantic UI React

Question

我正在嘗試實現文件上傳，但使用SUIR <Input> 、按鈕、標簽等。

這完全是關於渲染中元素的使用。

使用常規 html <label>和<input>元素，此過程按預期工作。

  <Form.Field>
    <label>File input & upload for dataschemas & datasources</label>
    <input type="file" onChange={this.fileChange} />
    <Button type="submit">Upload</Button>
  </Form.Field>

現在我正在嘗試使用 SUIR <Input>元素，以及一些帶有<Button>元素的道具來進行樣式設置。

  <Form.Field>
    <label>File input & upload </label>
    <Input type="file" onChange={this.fileChange}>
      <Button
        content="Choose File"
        labelPosition="left"
        icon="file"
      />
    </Input>
    <Button type="submit">Upload</Button>
  </Form.Field>

您可以訪問這里的代碼和框，以更好地了解我在說什么。

當我在 SUIR 實現示例中單擊Choose File ，它不會提示用戶從他們的系統中選擇文件，而常規 html <input>會。 我不知道如何讓<Input type="file ...>在語義上表現得一樣。

Answer 1

SUIR 不提供開箱即用的 FileInput 按鈕解決方案。 但是您可以輕松創建自己的此類按鈕實現。 例如，通常這是通過使用一個hidden文件輸入和一個按鈕來完成的，當用戶點擊它時會觸發隱藏輸入點擊：

  <Button
    content="Choose File"
    labelPosition="left"
    icon="file"
    onClick={() => this.fileInputRef.current.click()}
  />
  <input
    ref={this.fileInputRef}
    type="file"
    hidden
    onChange={this.fileChange}
  />

其中this.fileInputRef是由React.createRef()方法創建的 React ref。 您可以使用上述解決方案檢查此代碼和框示例。

Answer 2

GProst 的回答非常有效。 在另一種情況下，您可能不想創建ref來實現此文件輸入按鈕。

下面的解決方案使用htmlFor道具並將該id傳遞給<input> 。 不使用 ref 消除了額外的 JS，以及按鈕和輸入之間不必要的通信。

<Button as="label" htmlFor="file" type="button">
  Some button stuff
</Button>
<input type="file" id="file" style={{ display: "hidden" }} onChange={this.onChange} />

Answer 3

您可以使用如下反應設置文件上傳表單。

您還可以獲取文件名和文件引用，如本示例所示，如果您使用express, node堆棧，我已經將前端上傳邏輯包含在axios和后端代碼中

 class Thingy extends React.Component { uploadFile = event => { // filename console.log('filename ' + event.target.value); //file console.log('file ' + event.target.files[0]); // if you are using axios then you can use below code //const formData = new FormData(); // formData.append('file', event.target.files[0]) // axios.put( // 'url', // formData, // { headers: { 'content-type': 'multipart/form-data' } } // ).then(data => { // console.log('file uploaded') // console.log(data) // }).catch(e => { // console.log('error') // console.log(e) // }) // in express , node, backend code would be //import formidable from 'formidable' //(req, res) => { // let form = new formidable.IncomingForm(); // form.parse(req, (err, fields, files) => { // you can get the file from files.file.path // }) // } } render() { console.log("rendered"); return ( <div> <input type="file" id="file" name="filename" onChange={this.uploadFile} /> </div> ); } } // Render it ReactDOM.render( <Thingy/>, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 4

這是我的解決方案：

         function mainPage(){
            const [newFile, SetNewFile] = useState([]); 

            const fileChange = (event) => {
                SetNewFile( event.target.files[0] );
             };

            const onFormSubmit = () =>{
              // Do something
            }

            return(
            <Form onSubmit={onFormSubmit}>
                <Form.Field>
                    <Button as="label" htmlFor="file" type="button">
                        Some button stuff
                    </Button>
                    <input type="file" id="file" hidden onChange={fileChange} />

                </Form.Field>
                <Button type="submit">Upload</Button>
            </Form>)
            }