4

我们如何在输入框下方显示选定的值。

用例：

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

提前致谢！

4

2 回答 2

3

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

希望这对您有所帮助。

问候

于 2019-01-18T13:07:24.263 回答
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因此选择不会显示任何选定的值，而是让我们处理

于 2021-05-12T16:03:38.293 回答