验证React-Bootstrap-Typeahead输入

Question

我在表单中使用验证功能，该功能检查字段是否为空 。 这适用于普通文本输入框，但不适用于Typeahead框。

我想检查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输入的handleChange函数：

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

它与name字段一起正常工作，因为它等于一个空字符串。 但是使用Typeahead时，它不是字符串，因此我不确定将this.state.industry设置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 === []) { ... }

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