Question

如何在输入框的正下方显示所选值。

用例：

我们正在使用多个选择react-select，当我们从选择框中选择值时，它会在输入框内选择。我们是否可以使用方法或其他方法在输入框（正下方）之外获取所选值

提前致谢！

Answer 1

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

希望这对您有所帮助。

致谢

Answer 2

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

// 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 时我们会禁用它，因此选择不会显示任何选定的值，而是让我们自己处理

在输入框外部渲染所选项目，以选择反应选择库

2 个答案: