Как удалить выбранный символ из поля ввода-выбора? - PullRequest
Новая
       30

Как удалить выбранный символ из поля ввода-выбора?

0 голосов
/ 22 марта 2019

Я использую react-select и использовал formatOptionLabel prop для форматирования метки параметров.Всякий раз, когда я выбираю какую-либо опцию, она отображается во Вводе, и она также получает отформатированную метку

. Я пытался передать selectedIcon и удалить его в событии onChange, и это сработало, но для этого мне нужно передать его в каждой опции.и удаляем каждый onChange.

Это handleValueChange 

handleChange = (value) => {
    const { selectedIcon, ...restFields } = value;
    this.setState({
      someKey: restFields
    });
};

Это функция formatLabel, которую я использовал 

const formatLabel = (data, restFields) => {
  if (restFields.selectValue[0].value === data.value) {
    return (
      <div>
        {data.selectedIcon}{data.icon}{data.label}
      </div>
    )
  } else {
    return (
      <div>
        {data.icon}{data.label}
      </div>
    )
  }
};

Есть ли способ отформатировать выбранное значениеиначе, когда меню не открыто.а также мне нужно применить разные стили к ним обоим.

Например: я хочу показать ✔️ в меню параметров перед выбранными значениями, а когда меню закрыто, оно должно показывать только выбранное значение.

1 Ответ

0 голосов
/ 25 марта 2019

Для стилевого оформления вы можете использовать api для стилевого оформления каждого компонента по отдельности. Он предоставляет исходные стили (в документах как provided) и предоставленные реквизиты (в документах как state) в качестве аргументов и возвращает объект стилей. 

<Select
    { ... }
    styles={{
        option: (provided, state) => ({
            ...provided,
            // Your styles here
        }),
        singleValue: (provided, state) => ({
            ...provided,
            // Your styles here
        })
    }}
/>

Если вы хотите просто поставить галочку на выбранной опции, вы можете сделать это с помощью стилей api и псевдоэлементов. 

{
    ...provided,
    '&:before': {
        fontFamily: "FontAwesome" // For example
        content: "\f00c"
    }
}

Другим методом будет использование frameworks компонентов для перезаписи Option и / или SingleValue (или MultiValue) компонентов (оба используют результат formatOptionLabel в качестве непосредственного дочернего элемента React ). 

const Option = ({ children, ...props }) => <components.Option { ...props }>
    {/* I'll do it my way */}
    { customLabelFormat(props.data) }
    {/* Or like this as per your request */}
    { props.isSelected && <CheckMark /> }
    { children } // To keep default label format as an example
</components.Option>;

<Select
    { ... }
    components={{
        Option
    }}
/>
...