时间戳

首页 > 解决方案 > React bootstrap typeahead clearButton图标（X）不会出现在单个选择中

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

问题描述

我尝试为单个选择输入选择 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);
};

标签： react-bootstrap-typeahead

解决方案

使用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].

推荐阅读