在输入框之外渲染所选项目，以实现反应选择库的多选

Question

如何才能将选中的值显示在输入框的正下方

用例：

我们正在使用react-select的多重选择，当我们从选择框中选择值时，它会以选中状态出现在输入框中。我们是否可以有一种方法或东西来获取输入框之外（就在其下方）的选定值

提前致谢！

Answer 1

我遇到了类似的问题，我解决了它，创建了一个反应选择组件的包装器并向我的自定义组件添加了一个状态。当反应选择更改时，我将所选项目添加到组件状态中，并在下面的自定义 div 中显示，您可以在其中添加所需的样式。这是我的方法的示例：https://codesandbox.io/s/2kyy4998y

希望这对您有帮助。

问候

Answer 2

我最近不得不为我正在从事的一个项目执行此操作，并在这里写下了我是如何做到的。要点是你需要一个包装组件

// SelectWrapper.js
import ReactSelect from 'react-select'

const SelectWrapper = (props) => {
    const { isMulti, value } = props;

    return (
        <div>
            {isMulti ? value.map((val) => <span>{val.label}</span>) : null}
            <Select {...props} controlShouldRenderValue={!isMulti} />
        </div>
    )
}

这里非常重要的部分是

controlShouldRenderValue

属性，当

isMulti

为 true 时我们会禁用它，因此选择不会显示任何选定的值，而是让我们处理它

Answer 3

理查德·贝蒂提供的链接不再有效。这是更新的链接https://dev.to/rbt/react-select-with-options-outside-353g