选择特定文件类型时切换额外输入

Question

我有一个输入，我正在尝试在选择特定文件扩展名时呈现特定的额外输入。因此，在这种情况下，选择CSV文件时，将出现额外的选项。我遇到的问题是我当前的代码在 React 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);