【发布时间】：2019-08-21 16:04:21
【问题描述】：
我在表单中使用了 validation 函数，它检查字段是否为 empty。这适用于普通文本输入框，但不适用于 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 函数，我需要预先输入：
handleTypeaheadChangeIndustry = selected => {
const industry = selected.map(option => option.value);
this.setState({industry})
};
它适用于name 字段，因为它等于一个空字符串。但是使用 Typeahead，它不是字符串，所以我不确定将 this.state.industry 设置为什么。
非常感谢任何帮助或建议，如果您需要更多详细信息，我可以快速更新我的答案。
【问题讨论】：
-
试试这个 -
if(this.state.industry.length === 0) -
谢谢，我试过了，但问题是它总是显示错误消息 - 当输入为空时，什么时候不是。不过，这是朝着正确方向迈出的一步，所以谢谢。
-
这是因为
if (nameError || industryError) {当 nameError 为 true 时，它会设置这两个值。你需要 if-else 这里。 -
我不认为是这样，因为当我完全删除
nameError时，我仍然遇到同样的问题。当我包含nameError时，一旦输入一个值，消息（名称）就会被删除，但industryError的消息总是存在的，所以我认为这与即使选择了一个值也有关对于工业来说，长度似乎仍然是 0 -
你能把
this.handleTypeaheadChangeIndustry的代码贴出来吗？
标签： javascript reactjs validation react-bootstrap react-bootstrap-typeahead