當選擇特定文件類型時切換額外輸入

Question

我有一個輸入，並且當特定文件擴展名正在選擇時，我想要提供特定的額外輸入。所以在這種情況下，當選擇一個CSV文件時，會出現額外的選項。我遇到的問題是，在陣營Uncaught Invariant Violation: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of EnhancedSwitch.

下面是當前的代碼我使用我當前的代碼產生一個錯誤：

render() { 
    return (
     <Dialog 
      open={this.state.open} 
      title="Upload File" 
      actions={standardActions} 
      autoScrollBodyContent={true} 
     > 
      <br /> 
      <div> 
       <form encType="multipart/form-data"> 
        <input type="file" accept=".xls, .xlsx, .csv" id="file_to_upload" onChange={this.handleChange.bind(this)} /> 
       </form> 
      </div> 
      <br /> 
      <div> 
       {this.state.isCSV ? <CSVInputs /> : null} 
      </div> 
     </Dialog> 
    ); 
} 

而且handleChange功能：

handleChange(e) { 
    let files = document.getElementById('file_to_upload').files; 
    let formData = new FormData(); 
    let extension = files[0].name.split('.')[files[0].name.split('.').length - 1].toLowerCase(); 

    for (let key in files) { 
     if (files.hasOwnProperty(key) && files[key] instanceof File) { 
      formData.append(key, files[key]); 
     } 
    } 

    if (extension === 'csv') { 
     console.log('show me the inputs'); 
     this.setState({ 
      isCSV: true, 
      disabled: false, 
      files: formData 
     }); 
    } else { 
     this.setState({ 
      disabled: false, 
      files: formData 
     }); 
    } 
} 

有一種我可以改變我的代碼的方式，這樣我就不會出現這個錯誤？

任何幫助將是非常讚賞

感謝您的時間

Answer 1

我用下面的代碼嘗試。我沒有得到錯誤。我不確定有關Dialog & CSVInputs組件，所以我使用它們的虛擬代碼。

import React from 'react' 
import ReactDOM from 'react-dom' 

class CSVInputs extends React.Component{ 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div>CSVInputs</div> 
     ); 
    } 
} 

class Dialog extends React.Component{ 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className={this.props.open} title={this.props.title} >{this.props.children}</div> 
     ); 
    } 
} 

class FileSelector extends React.Component{ 

    constructor() { 
     super(); 
     this.state = { 
       open: true, 
       isCSV: false, 
       disabled: false, 
       files: null 
      }; 
    } 

    handleChange(e) { 
     let files = document.getElementById('file_to_upload').files; 
     let formData = new FormData(); 
     let extension = files[0].name.split('.')[files[0].name.split('.').length - 1].toLowerCase(); 

     for (let key in files) { 
      if (files.hasOwnProperty(key) && files[key] instanceof File) { 
       formData.append(key, files[key]); 
      } 
     } 

     if (extension === 'csv') { 
      console.log('show me the inputs'); 
      this.setState({ 
       open: true, 
       isCSV: true, 
       disabled: false, 
       files: formData 
      }); 
     } else { 
      this.setState({ 
       open: true, 
       isCSV: false, 
       disabled: false, 
       files: formData 
      }); 
     } 
    } 

    render() { 
     return (
      <Dialog 
       open={this.state.open} 
       title="Upload File" 
      > 
       <br /> 
       <div> 
        <form encType="multipart/form-data"> 
         <input type="file" accept=".xls, .xlsx, .csv" id="file_to_upload" onChange={this.handleChange.bind(this)} /> 
        </form> 
       </div> 
       <br /> 
       <div> 
        {this.state.isCSV ? <CSVInputs /> : null} 
       </div> 
      </Dialog> 
     ); 
    } 
} 

var app = document.getElementById('app'); 

ReactDOM.render(<FileSelector />, app);