1

在react-widgets 示例页面上，输入“Jase”后，列表会被过滤，只有完全匹配的内容可见。

然而，在我的项目和以下代码段中，输入“Test 1”后，我看到的是整个列表，而不是一个匹配的条目。

如何将组合框配置为仅显示匹配条目而不是整个列表？

let { Combobox } = ReactWidgets;

ReactDOM.render(
    <Combobox
      data={['Test 1','Test 2','3rd element']}
      suggest={false}
      filter="contains"
    />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-widgets/4.5.0/react-widgets.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-widgets/4.5.0/css/react-widgets.css">
<div id="react"></div>

4

1 回答 1

1

在玩了一下之后，我注意到，您的示例和他们网站上的示例之间的唯一区别是，他们使用对象数组作为数据，而您使用字符串数组。

事实证明，如果您输入的文本同时匹配选项的值和文本，它就会出现不希望的行为。但是在网站上的示例中，选项的实际值是数字，这种情况不会发生。

我不确定这是否是组件的错误，或者是否是预期的行为。但作为一种解决方法，您可以创建一个 Wrapper 组件，将您的字符串数组转换为对象数组，然后倒过来。像这样的东西：

function ComboboxWrapper({data,onChange,textField,...rest}){
  const wrappedData = data.map((text,value)=>({text,value}))
    return React.createElement(Combobox,{
    data:wrappedData,
    onChange:(c)=>{
      onChange && onChange(typeof c=="object"?c.text:c)
    },
    textField:"text",
    ...rest
   })
}

这是一个用于演示的JSFiddle

于 2020-06-19T12:41:06.320 回答