如何获取react-bootstrap-typeahead选中选项的全部属性？

不需要通过输入节点的value间接获取，组件本身提供了直接获取选中选项的方法：

• 利用组件ref调用getSelected()方法，该方法返回选中的完整选项对象数组（支持多选场景），如果是单选需求，取数组第一个元素即可拿到包含所有属性的选项对象。

代码示例 #

// 假设已定义textBoxRef
const getSelectedOption = () => {
  const selectedOptions = textBoxRef.current.getSelected();
  // 单选场景下取第一个元素
  const selectedOption = selectedOptions[0];
  
  if (selectedOption) {
    // 直接访问所有属性
    console.log('选中的id:', selectedOption.id);
    console.log('选中的state:', selectedOption.state);
  }
};

说明 #

• getSelected()返回的对象结构和你传入的options完全一致，无需额外匹配就能拿到所有属性。
• 相比通过输入框value匹配选项的方式，这种方法更可靠，避免了显示文本与选项属性不一致导致的匹配错误。

内容的提问来源于stack exchange，提问作者ranidu harshana