Как отключить отображение выбранных значений на панели ввода в реакции выбора? - PullRequest
Новая
       6

Как отключить отображение выбранных значений на панели ввода в реакции выбора?

0 голосов
/ 18 февраля 2019 
const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

const Option = props => { 
  //const temp = "some";
  //
  return ( 
  <div> 
    <components.Option {...props}> 
      <input type="checkbox" checked={props.isSelected} onChange={() => null} /> 
      <label>{props.value}</label> 
    </components.Option>
  </div> 
  ); 
};

В настоящее время мой код выглядит выше, что он делает, он отображает что-то вроде этого ScreenShot

Я не хочу отображать выбранные значения в строке ввода поиска. Есть ли способ отключить отображение выбранной опции на панели ввода?

Код для строки выбора 

<Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вы можете просто отобразить ваши параметры, только если их isSelected равно false, а в другом случае отправить пустое div, используя троичное условие: 

const Option = props => {
    return !props.isSelected ?
        <div>
            <components.Option {...props}>
                <input type="checkbox" checked={props.isSelected} onChange={() => null} />
                <label>{props.value}</label>
            </components.Option>
        </div>
        :
        <div/>
};

Вам придетсявозвращать узел JSX в каждом случае, возвращая null (или эквивалент), будет выдано предупреждение / ошибка.

0 голосов
/ 18 февраля 2019

Я подозреваю, что это связано с опорой hideSelectedOptions, которую вы передаете здесь компоненту Select:

<Select hideSelectedOptions={false} />

Я бы попытался установить его на true(или удалите его) и посмотрите, решит ли это вашу проблему.

...