如果未选择文件，则不会调用 OnSubmit答案

【问题标题】：OnSubmit not called if file not chosen如果未选择文件，则不会调用 OnSubmit
【发布时间】：2019-07-19 21:20:14
【问题描述】：

我是新来的反应。我有一个表单，它应该在提交表单时显示一个警报框，显示有关输入详细信息的信息。确实如此，但前提是选择了一个文件。

我在 SO 上遇到的所有其他相关问题都没有解决这个问题

import React, {createRef} from "react";
import {render} from "react-dom";


class TheForm extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {text: ""};
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.fileInputRef = createRef();
    }
    render()
    {
        return (<form onSubmit={this.handleSubmit}>
            <input type="text" onChange={this.handleTextChange}
            value={this.state.text}/>
            <br />
            <input type="file" ref={this.fileInputRef} />
            <br />
            <input type="submit" value="Go!" 
            style={{fontFamily: "segoe UI", cursor: "pointer"}} />
            </form>);
    }
    handleTextChange(e)
    {
        this.setState({text: e.target.value});
    }
    handleSubmit(e)
    {
        alert(this.state.text + " " + this.fileInputRef.current.files[0].name);
        this.setState({text: ""});
        e.preventDefault();
    }
}

render (<TheForm />, document.querySelector("body"));

如果选择了文件，则代码可以正常工作。如果未选择文件，则甚至不会调用 onSubmit。真正的问题是什么？

【问题讨论】：

这里有一些调试提示：遇到问题时首先检查浏览器开发控制台，看看发生了什么。如果您是初学者，请尝试在各个位置添加console.log() 或alert() 语句，以查看那里的代码是否正在运行或状态如何。当您稍微舒服一点时，学习如何使用debugger; 语句或浏览器调试器/断点来单步执行您的代码。当值可能未定义时，请小心访问对象和数组的属性。
是的，我太傻了。谢谢

标签： javascript html reactjs forms

【解决方案1】：

您在运行代码时是否检查过浏览器中的开发控制台？由于这条线，我几乎可以保证您会收到Uncaught TypeError: Cannot read property 'name' of undefined：

alert(this.state.text + " " + this.fileInputRef.current.files[0].name);

如果您还没有选择文件，this.fileInputRef.current.files 是一个空数组，因此您无法访问files[0].name。你会得到一个 TypeError 并让你的应用崩溃。

在尝试访问其名称之前先尝试检查文件是否存在：

const fileName = this.fileInputRef.current.files[0] ? this.fileInputRef.current.files[0].name : "No file selected.";
alert(this.state.text + " " + fileName);

或者你可以尝试/捕捉：

let fileName = "";
try {
  fileName = this.fileInputRef.current.files[0].name;
} catch(e) {
  fileName = "No file selected";
}
alert(this.state.text + " " + fileName);

【讨论】：