如何通过 Antd 表单中的选择字段启用选项卡？

【问题标题】：How to enable tabbing through a select field in an Antd form?如何通过 Antd 表单中的选择字段启用选项卡？
【发布时间】：2020-10-10 19:00:31
【问题描述】：

默认情况下，AntD 表单在切换字段并遇到选择字段时，用户输入的值不会在切换到下一个字段时停留。我该如何解决？我一直在尝试使用 onBlur 来设置 Select 字段的各种方法，当用户退出但无法正常工作时。

我在这里创建了一个简单的代码框来说明我的问题。

代码沙盒Example

例如重现我所指的内容..

在第一个输入字段中输入内容，然后点击 Tab 将焦点移到第二个输入字段（选择下拉菜单）。
使用键盘输入选项之一，例如“A”。

跳到第三个字段。请注意，第二个字段（选择下拉菜单）不会一直填充输入的值。让它保持不变的唯一方法是使用鼠标选择它。这不是一个好的用户体验。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

这是antd的正常行为。它不会留下，因为 Select 没有价值，即使您输入确切的值并点击选项卡它也不会留下，因为它没有价值，您需要在选项列表中选择才能保留输入。搜索的目的是快速选择一个选项，而不是设置Select上的值

一种解决方案是使Select 成为受控组件，这意味着该值将基于状态值：

this.state = {
  ...
  second: undefined,
}

onSearch = (value) => {    
  if (value.trim()) {
    this.setState(() => ({ second: value.toUpperCase() }));
  }
};

<Select
  value={this.state.second}
  onSearch={this.onSearch}
>

请注意，这不是更好的方法，即使输入不在选项列表中，用户也可以输入任何内容。我建议查看名为 Autocomplete 的 antd 组件。如果您允许用户输入，即使输入不在选项列表中，您也可以实现相同的目标，但这是一个不错的选择。

【讨论】：

在此沙盒演示中出错。