React-выбрать поведение по умолчанию и пользовательский вид - PullRequest
Новая
       12

React-выбрать поведение по умолчанию и пользовательский вид

0 голосов
/ 11 марта 2020

Я очень новичок в реакции и в реакции-выбора тоже. При попытке реализовать пользовательский компонент, который я ищу, я прочитал много информации, но это не очень удобно для ИМХО.

  1. Я хочу, чтобы мой компонент реагировать на выбор показывал выбранные данные в строке. Теперь он показывает их в столбцах, я прикрепил картинку.

Кстати, какова цель названия, метки полей? Какая точная разница? 

<Select
  defaultValue={[models[0], models[1]]}
  isMulti
  options={models}
  className="select-custom-class"
  name="form-field-name"
  options={models}
  placeholder="Model: "
/>

this is my current ugly react-select multi

Я хочу сделать несколько выпадающих списков "стиль фишек" VIA реагировать на выбор. Является ли это возможным? Какие параметры стиля я должен указать, чтобы закруглить углы, как на картинке? Я также хочу добавить немного текста c внутри фишек, который будет отображаться всегда: например (относительно пи c ниже) "Город: $ here_come_the_values"

this is what I want

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

Любая помощь приветствуется! Спасибо.

1 Ответ

0 голосов
/ 22 апреля 2020

Ну, на самом деле я нашел, как сделать красивый компонент выбора ONE LINE с точками в конце (например, оператор распространения или многоточие) с современным синтаксисом response-jsx без этого 

            <Select
                defaultValue={defaultValues}
                closeMenuOnSelect={false}
                isMulti
                options={defaultValues}
                components={{
                    IndicatorSeparator: () => null,
                    DropdownIndicator,
                    ClearIndicator,
                    MultiValueContainer: multiValueContainer
                }}

и здесь мы возвращаем все значения 

const multiValueContainer = (props) => {
    const label = props.data.label;
    const allSelected = props.selectProps.value;
    const index = allSelected.findIndex(selected => selected.label === label);
    const isLastSelected = index === allSelected.length - 1;
    const labelSuffix = isLastSelected ? ` (${allSelected.length})` : ", ";
    const val = `${label}${labelSuffix}`;
    return val;
};

и стиль 

const styles = {
    control: (base, state) => ({
        ...base,
        borderRadius: '16px',
        border: '1px solid #E5F7FF',
        boxShadow: 'none',
        boxSizing: 'border - box',
        wordWrap: "break-word",
        '&:hover':
            {
                border: '1px solid #0679A8',
            }
    }),
    valueContainer: (provided, state) => ({
        ...provided,
        textOverflow: "ellipsis",
        maxWidth: "90%",
        whiteSpace: "nowrap",
        overflow: "hidden",
        display: "initial"
    })
};
...