流利的UI ComboBox allowFreeform

问题描述

我在ms的fluentui中遇到受控ComboBox的问题。 我无法插入自己的文本，在插入并按Enter键后，文本消失了。 选项的选择没有问题。

这里是一个代码笔：https://codepen.io/verhext/pen/jOrKOPe

 <ComboBox
    componentRef={comboBoxRef}
    defaultValue={selectedKey}
    selectedKey={selectedKey}
    label="Basic ComboBox"
    allowFreeform
    autoComplete="on"
    options={comboBoxBasicoptions}
  onChange={onChange}
/>

我不知道我的代码在做什么错。
谢谢！

解决方法

组合框不允许您选择任何文本值。 allowFreeForm prop意味着您可以使用手动搜索来选择项目。

,

这里是方法...基本上onChange事件有四个参数..“值”包含输入的文本。当没有匹配的键/值时，“selectedOption”将是未定义的。 您可以使用“text”属性将值分配回控件。

private onComboBoxChange = (selectedOption: any,value: string): void => {
    let v = value;
    if (selectedOption) {
        v = selectedOption.key;
    }
    this.props.onStateChange(v);
} 

<ComboBox allowFreeform={true} autoComplete={'on'}
          options={this.props.options} 
          onChange={(e,selectedOption,i,value) => { this.onComboBoxChange(selectedOption,value); }}                            
          text={<value>} />