javascript - 验证 React-Bootstrap-Typeahead 输入

Question

我在表单中使用验证函数，用于检查字段是否空。这适用于普通文本输入框，但不适用于预输入框。

我想检查 Typeahead 框是否为空，如果是，则显示错误消息，即 this.state.industryError

这是我的状态:

state = {
 name: "",
 industry: [],
 nameError: "",
 industryError: "",
}

这是我的 Typeahead 表单元素:

<Form>
 <Label>Industry</Label>
  <Typeahead
   id="industryMultiSelect"
   multiple
   options={industries}
   placeholder="Select industry..."
   onChange={this.handleTypeaheadChangeIndustry} />
    <div>
     {this.state.industryError}      // Where the error message appears
    </div>
</Form>

我的验证函数如下:

validate = () => {
    let nameError = "";
    let industryError = "";

    if(!this.state.name) {                  // Checks if field is empty
      nameError = "Please enter a name";
    }

    if(this.state.industry === []) {     // I think this is the problem
      industryError = "Please enter an industry";
    }

    if (nameError || industryError) {
      this.setState({nameError, industryError});

      return false;
    }
      return true;
  };

这是我为预先输入调用的handleChange函数:

handleTypeaheadChangeIndustry = selected => {
    const industry = selected.map(option => option.value);
    this.setState({industry})
  };

它与 name 字段配合得很好，因为它等于一个空字符串。但对于 Typeahead，它不是一个字符串，所以我不确定将 this.state.industry 设置为什么。

非常感谢任何帮助或建议，如果您需要更多详细信息，我可以快速更新我的答案。

Answer 1

在不查看所有内容的情况下，很难确定代码无法运行的原因。也就是说，我创建了一个沙箱，我相信它可以使用上面发布的代码完成您所要做的事情:

https://codesandbox.io/s/react-bootstrap-typeahead-form-validation-686qe

正如 @ravibagul91 所指出的，您应该使用其中之一

if (this.state.industry.length === 0) { ... }
if (!this.state.industry.length) { ... }

而不是

if (this.state.industry === []) { ... }

在我发布的沙箱中使用后者会导致代码无法工作，而使用前两个中的任何一个时一切正常。