React bootstrap typeahead clearButton图标（X）不会出现在单个选择中

Question

我尝试为单个选择输入选择 clearButton 道具。但是它没有按预期工作。默认选择的输入不会出现清除 (x) 图标。它仅在发生事件更改时出现，即如果我选择了其他输入。我的问题是手动删除输入不会触发所选值的更改。任何指针将不胜感激。

<Typeahead
  clearButton
  defaultInputValue={props.city}
  options={props.cityOptions}
  onChange={(selected) => handleCityFieldChange(selected[0], props)}
  placeholder="Choose a city"
/>

这里是handleCityFieldChange函数：

handleCityFieldChange = (selected, props) => {
    const newFieldValues = Object.assign({}, props.fieldValues, {"city": selected});
    props.onChange(newFieldValues);
};

Answer 1

使用defaultSelected，而不是defaultInputValue：

<Typeahead
  clearButton
  defaultSelected={props.city}
  options={props.cityOptions}
  onChange={(selected) => handleCityFieldChange(selected[0], props)}
  placeholder="Choose a city"
/>

只有在有选择时才会出现清除按钮。 defaultInputValue 设置输入的value，但实际上没有选择选项，这就是您看不到按钮的原因。

注意：defaultSelected 需要一个数组，因此如果 props.city 是一个对象，则需要传递 [props.city]。