React-Bootstrap-Typeahead自定义输入选中项不显示Token问题

问题出在多选模式下，自定义输入框缺少必要的容器包裹。React-Bootstrap-Typeahead在multiple模式下，需要一个容器元素来承载Token和输入框，你直接返回Form.Control导致Token没有挂载的DOM节点，因此即使状态更新，界面也不会显示选中的Token。

修复步骤： #

• 在renderInput的参数中解构出containerRef（之前你漏掉了这个关键参数）；
• 用一个容器元素（比如div）包裹Form.Control，并将containerRef绑定到这个容器上；
• 给容器添加组件默认的类名rbt-input-multi-container，确保样式和组件行为一致。

修改后的代码： #

<Typeahead
  id={`${testIdPrefix}-medal`}
  labelKey="medal"
  multiple
  placeholder="Choose up to 2"
  options={[
    { medal: "Gold" },
    { medal: "Silver" },
    { medal: "Bronze" },
    { medal: "Tin" }
  ]}
  selected={multiSelections}
  onChange={(selections) => setMultiSelections(selections.slice(-2))}
  renderInput={({ inputRef, referenceElementRef, containerRef, ...inputProps }) => (
    // 添加容器并绑定containerRef
    <div ref={containerRef} className="rbt-input-multi-container">
      <Form.Control
        test-id={`${testIdPrefix}-medal`}
        {...inputProps}
        ref={(node) => {
          inputRef(node);
          referenceElementRef(node);
        }}
      />
    </div>
  )}
  renderToken={(option, { onRemove }, index) => (
    <Token
      key={index}
      onRemove={onRemove}
      option={option}
      className="medal-token"
    >
      {`${option.medal}`}
    </Token>
  )}
/>

原理说明： #

在多选模式下，组件内部会通过containerRef找到挂载Token的容器，将选中项的Token渲染在输入框的前方。如果你没有提供这个容器，组件无法找到合适的DOM位置插入Token，就会出现状态更新但界面无变化的情况。添加容器后，Token就能正常渲染，同时兼容你自定义Token的需求。

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