reactjs - 在反应选择包中选择值后，如何使占位符移动到选项的右侧？

Question

我正在使用“react-select”包来制作多选下拉菜单并根据我的要求添加道具。但我想要更多的一件事是：在选择下拉列表中的值后，我让占位符移动到选项的右侧。

就像在图像中一样，一个选项被选中并仍然显示占位符。我想要这样的东西，当我选择值时，占位符应该转移到选项的右边。这就是我使用的方式。

<Select
            placeholder='Type Team Name...'
            value={getOptions(value)}
            options={getOptions(data)}
            onChange={(data) => setValue(data || [])}
            styles={selectStyles}
            isMulti
            isClearable
            isSearchable
        />
    ```
    

标签： reactjs

Answer 1

主要的 Javascript 文件：

import React from "react";
import "./example.css"

import Select from "react-select";
import { colourOptions } from "./data";
setTimeout(async ()=>{
    const reqinput= await document.getElementById("react-select-2-input");
    if(reqinput){
        reqinput.placeholder = "slect colors....";
        reqinput.style.width="550px"
    }else{
        console.log("thu")
    }
},200)

const Example=()=>{
    return(
        <Select
        defaultValue=""
        placeholder="select colors..."
        isMulti
        name="colors"
        options={colourOptions}
        className="basic-multi-select"
        classNamePrefix="select"
      />
    )
}

export default Example

示例.css 文件：

.css-1wa3eu0-placeholder{
    display: none;
}

我添加了 css，因为当输入被清除时，不需要div的东西重新出现，因此我不得不隐藏div通过 css

这是我在本地系统上测试的工作。

如果它不起作用，请不要惊慌，这只是因为类名和 id 的变化只是检查它们并在需要时替换类和 id，因为我已经参考了您的代码和框示例

编辑 ：

上述代码的结果是：