Fluent UI ComboBox allowFreeform

Question

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

这里是代码笔：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

Combobox 不允许您 select 任何文本值。 allowFreeForm 属性意味着您可以使用手动搜索 select 项。

Answer 2

方法是这样的……onChange 事件基本上有四个参数。“值”包含输入的文本。当没有匹配 key/value 时，“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>} />

Fluent UI ComboBox allowFreeform

Fluent UI ComboBox allowFreeform

office-ui-fabric

fluent-ui

fluentui-react