Блог

Я использую пакет ‘react-select’ для создания выпадающего списка с несколькими вариантами выбора и добавления реквизитов в соответствии с моими требованиями. Но я хочу еще одного: я делаю так, чтобы заполнитель перемещался вправо от параметров после выбора значений из выпадающего списка.

Как и на изображении, выбран один параметр, а заполнитель все еще отображается. Я хочу что-то вроде этого, чтобы при выборе заполнителя значений он смещался вправо от параметров.Вот как я использую.

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

Основной файл 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

Это работа, которую я протестировал в своей локальной системе.

Если это не работает, пожалуйста, не волнуйтесь, это только из-за изменения имен классов и идентификаторов, просто проверьте их и замените классы и идентификаторы, если требуется, как я сделал это со ссылкой на ваш пример codesandbox

Редактировать :

Результатом вышеупомянутого кода является: