office-ui-fabric - Fluent UI 组合框 allowFreeform

Question

我对来自 ms 的 fluentui 中的受控ComboBox有疑问。我无法插入自己的文本，插入并按 Enter 后文本消失。选项选择没有问题。

这里有一个codepen：https ://codepen.io/verhext/pen/jOrKOPe

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

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

Answer 1

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

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>} />

Answer 2

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