从 2 个输入字段设置 React 组件的状态

Question

我在反应组件中有两个输入字段 type=file。我必须在每个输入字段中加载一个 json 文件，然后将 JSON 文件数据保存在两个不同的变量中并更新组件的状态。但是当我尝试这样做时，文件的两个数据都保存在同一个状态变量中。

这里是组件

export class comp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            uploadFile1:null,
            uploadFile2:null
        }
        this.readFile1 = this.readFile1.bind(this);
        this.readFile2 = this.readFile2.bind(this);
       
    }
    readFile1(e) {
        var file = document.querySelector("#file");
        if ( /\.(json)$/i.test(file.files[0].name) === false )
        { 
            alert("Not valid JSON file!"); 
        }
        else{
            const fileReader = new FileReader();
            fileReader.readAsText(e.target.files[0], "UTF-8");
            fileReader.onload = e => {
                console.log(e.target.result);
                var data = JSON.parse(e.target.result);
                
                this.setState({
                    uploadFile1: data
                })
            };
            
        }
    }
    readFile2(e) {
        var file = document.querySelector("#file2");
        if ( /\.(json)$/i.test(file.files[0].name) === false )
        { 
            alert("Not valid JSON file!"); 
        }
        else{
            const fileReader = new FileReader();
            fileReader.readAsText(e.target.files[0], "UTF-8");
            fileReader.onload = e => {
                console.log(e.target.result);
                var data = JSON.parse(e.target.result);
                
                this.setState({
                    uploadFile2: data
                })
            };
            
        }
    }
    
    render() {
        return (
            <div className="wrapper">
                
              <input onChange={this.readFile1} type="file" id="file" className="inputfile"/>
              <label htmlFor="file">Browse for files</label>

                            
              <input onChange={this.readFile2} type="file" id="file2" className="inputfile"/>
              <label htmlFor="file">Browse for files</label>
                                
                            
            </div>
        )
    }
}

有两个函数用于读取两个输入的文件。虽然两个输入字段的 id 不同，但两个文件的数据都在 uploadFile1 中设置。

输入字段的id有问题吗？除了“文件”之外，我无法更改输入文件的 ID。如果我不这样做，就会出现上述问题。

Answer 1

我不是 100% 确定，但我强烈怀疑问题在于您正在单击标签，并且两个标签都有 htmlFor="file"，即两个标签都指向 first 文件输入。

另外，你的onChange 方法名是错误的。我想这是输入问题的一部分，但那里可能存在问题，鉴于可用的代码很难说。

通常，您不需要在 onChange 方法中使用文件 ID 或 querySelector 来获取输入值。相反，您可以使用e.target 直接获取更改后的输入。使用它，您可以将代码减少到可以处理任一输入的单个 readFile 方法，这可能会使这更容易管理。像这样的：

onFileChanged(changeEvt) {
    const file = changeEvt.target;
    const fileId = file.id;

    if (/\.(json)$/i.test(file.files[0].name) === false) {
        alert("Not valid JSON file!");
    } else {
        const fileReader = new FileReader();
        fileReader.readAsText(file.files[0], "UTF-8");

        fileReader.onload = () => {
            console.log(fileReader.result);
            const data = JSON.parse(fileReader.result);

            this.setState({
                ['upload-' + fileId]: data
            })
        };
    }
}

render() {
    return (
        <div className="wrapper">
            <input onChange={this.onFileChanged} type="file" id="file1" className="inputfile"/>
            <label htmlFor="file1">Browse for files</label>

            <input onChange={this.onFileChanged} type="file" id="file2" className="inputfile"/>
            <label htmlFor="file2">Browse for files</label>
        </div>
    )
}

我还没有正确测试过，但你明白了。请注意，我在setState 中使用computed property name，因此您需要处于支持该功能的环境（即现代浏览器）中。