标签选择器 onChange 事件未触发

Question

我试图在用户在 Fluent UI Tag Picker 的输入字段中输入内容时触发一个事件，但由于某种原因它似乎不起作用。该文档提供了 onFocus 事件的示例，该事件运行良好，但 onChange 似乎不起作用。

我向 inputProps 对象添加了一个 onChange 回调

const inputProps: IInputProps = {
  onFocus: () => console.log('onFocus called'),
  onChange: () => console.log('onChange Called'),
};

然后将对象作为 inputProps 传递给 tagPicker

<TagPicker
    removeButtonAriaLabel="Remove"
    selectionAriaLabel="Selected colors"
    onResolveSuggestions={filterSuggestedTags}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={pickerSuggestionsProps}
    itemLimit={2}
    disabled={tagPicker}
    inputProps={{
      ...inputProps,
      id: 'picker1',
    }}
  />

这里有一个代码笔，其文档中的相同示例显示了该问题：https://codepen.io/Attias/pen/mdXbmzL

Answer 1

onChange 当用户从建议列表中选择某项或从选择器中删除项目时触发事件。你可以做的是使用 onInputChange 事件：

<TagPicker
  ...
  onInputChange={value => {
    // Do something.
    return value;
  }}   
/>

Codepen 工作示例。

标签选择器 onChange 事件未触发

Tag picker onChange event not firing

reactjs

fluent-ui

fluentui-react