特定のファイルタイプが選択されたときに余分な入力を切り替えます

Question

入力があり、特定のファイル拡張子が選択されているときに特定の余分な入力を表示しようとしています。この場合、CSVファイルを選択すると、余分なオプションが表示されます。

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 
     }); 
    } 
} 

があり、私が午前の問題は、私の現在のコードはここUncaught Invariant Violation: input is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of EnhancedSwitch.

を反応させるのにエラーが私が使用しています現在のコードで生成することです私はこのエラーが発生しないように私のコードを変更することができますか？

すべてのヘルプは非常に多く、私は次のコードで試してみましたお時間

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);