如何在 React / Javascript 中触发表单错误处理？答案

【问题标题】：How can I trigger form error handling in React / Javascript?如何在 React / Javascript 中触发表单错误处理？
【发布时间】：2020-06-06 23:57:16
【问题描述】：

我正在使用 Material-UI Google Autocomplete，https://material-ui.com/components/autocomplete/#google-maps-place，要求用户填写他们的地址。

我的主要问题是，我该如何强制“请填写此字段”。弹出窗口显示，即使该字段不为空。例如，如果用户开始输入“Made up address 124”，但没有从 Google 自动填充下拉菜单中进行选择，我将永远无法在表单上设置 place_id。这是我正在尝试做的事情：

handleSubmit(event) {
    event.preventDefault();
    const {form} = this.state;
    if(!form.google_place_id){
      // Trigger "Please fill out this field." error handling and don't submit the form.      
    }
    this.props.onSubmit(form);
}

【问题讨论】：

当您使用 required 属性时，这是本机输入行为。不是库或 JS
我是否可以强制触发，即使填写了所需的属性？
如果它被填写，那么表明它是没有意义的......
好吧，我想要一条自定义错误消息来说明“请从下拉列表中选择一个选项”。如果他们没有选择任何内容，而是尝试使用他们输入的内容提交，我想显示错误。
验证消息来自默认的 HTML5 输入元素。查看this page了解更多详情

标签： javascript reactjs redux material-ui

【解决方案1】：

您看到的弹出气泡是根据 html5 规范内置在浏览器中的。

但要回答您关于如何确定是否选择选项的问题，您可以自己实现此功能，也可以依赖您正在使用的自动完成组件 API。

https://material-ui.com/api/autocomplete/

在这里，我可以看到您可以尝试 freeSolo 和 getOptionSelected 。将 freeSolo 设置为 false 会使用户输入绑定到选项。

还要查看autoHighlight 和autoSelect，因为这可能会强制选择一个选项。

如果您想要更多地控制而不是您的输入是选项之一，那么只需自己检查一下即可。

const optionsObject = {   optionKey1: true, optionKey2: true }

useEffect(()=> {
    if(optionsObject[input]) {
     // input is one of the options
    } else {
  // input is not one of the options
  }
}, [input, optionsObject])

<Autocomplete 
    options={ Object.keys(optionsObject))
/>

【讨论】：

感谢您的详尽回答。但是我的问题不是如何确定是否选择了一个选项。我的问题是，一旦我知道没有选择一个选项，如何触发浏览器 html5 气泡弹出并说“请从下拉列表中选择一个选项”？
建议您永远不要依赖特定的浏览器气泡，因为它在每个浏览器上都不同，并且即使在同一个浏览器上也会在不同版本上进行更改。您要做的是创建一个自定义气泡，一旦您知道未使用组件状态选择选项，就会显示该气泡。