Содержимое ввода React-Select исчезает, когда select не сфокусирован

Некоторое время я успешно использую response-select, но у меня проблема с Creatable версией компонента.

Вот мой код:

const options = [
  {
    label: 'One',
    value: 'One'
  },
  {
    label: 'Two',
    value: 'Two'
  },
  {
    label: 'Three',
    value: 'Three'
  },
  {
    label: 'Four',
    value: 'Four'
  }
];

const selectedItems = [
  {
    label: 'One',
    value: 'One'
  }
];

const App = () => (
  <div style={styles}>
    <Select.Creatable
      backspaceRemoves={true}
      multi
      openOnFocus={false}
      openOnClick={false}
      onSelectResetsInput={false}
      onBlurResetsInput={false}
      onCloseResetsInput={false}
      arrowRenderer={() => null}
      clearRenderer={() => null}
      options={options}
      value={selectedItems} />
  </div>
);

Я также создал исполняемую версию этого здесь: https://codesandbox.io/s/q27lnon96

Как вы можете видеть, открывая страницу песочницы, любой текст, введенный в поле выбора, исчезает, когда пользователь щелкает мышью. Он появляется снова, если выбор снова будет в фокусе.

Вот GIF-запись поведения

Чтобы быть точным, мой вопрос касается текста «два», который вводится во входные данные - это не проблема с выбранными значениями (они работают нормально, если настроено правильное состояние и обратные вызовы).

Как я могу заставить response-select сохранить содержимое ввода? Кажется, что он запоминает значение внутри, но скрывает ввод текста, когда он больше не имеет фокуса. Я думал, что установка различных onFooResetsInput all на false позволит добиться этого, но это не совсем сработало.

Мое приложение использует значение текста, введенного в этот ввод, для воздействия на другие элементы пользовательского интерфейса, поэтому оно не синхронизируется, когда текст скрыт.

  • версия response-select: 1.2.1 (Последняя версия)
  • версии react и react-dom: 15 или 16 (обе демонстрируют такое поведение)

reactjs javascript react-select
person Matt Holland    schedule 06.02.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вам нужно обработать событие onChange, а также сделать selectedItems частью состояния вашего компонента. В вашем случае selectedItems никогда не меняются.

взгляните на https://codesandbox.io/s/pyo17y6qv7

Изменить

Да, он работает с inputRenderer. Аргумент функции по умолчанию передает значение на вход (это причина, по которой входное значение исчезает, потому что, когда оно находится в onBlur, оно передает значение '' на вход. Вероятно, ошибка в response-select, потому что у нас есть флаг onBlurResetsInput false), поэтому нам нужно удалить его, прежде чем мы передадим его на наш собственный ввод. Обновленный код на https://codesandbox.io/s/54on0mr984

person Yongzhi    schedule 06.02.2018
comment
Спасибо, но проблема все еще возникает. Моя проблема не в элементах выбора, а в содержимом текстового поля (строка, используемая для фильтрации параметров в раскрывающемся списке - в моем примере текст два). Извините, если это не было ясно из моего GIF. Я отредактировал вопрос, чтобы, надеюсь, сделать его более ясным. - person Matt Holland; 06.02.2018
comment
да только что понял, что прочитал твой вопрос, лол. Я думаю, что может быть ошибка, связанная с библиотекой выбора реакции, если onBlurResetsInput = false не работает. Возможно, вам потребуется добавить это свойство, чтобы передать компонент ввода, например inputRenderer = {() = ›‹ input / ›}. но если вы делаете это по-своему, вам нужно иметь состояние, чтобы отслеживать текущее значение ввода, а также приложить некоторые усилия для его стилизации. - person Yongzhi; 06.02.2018
comment
@MattHolland да, я думаю, что подход inputRenderer работает - person Yongzhi; 06.02.2018
comment
Мне просто нужно было явно скрыть текст заполнителя, когда на входе было значение (в противном случае оно выглядело наложенным): placeholder={!filterValue ? placeholder : null} - person Matt Holland; 07.02.2018

arrow_upward
0
arrow_downward

Для всех, кто все еще интересуется решением для реакции-выбор версии2.

Нижеприведенное решение работает для response-select v2.

Документы - https://react-select.com/upgrade-guide#concepts

import React, { useState } from 'react'
import { default as ReactSelect } from "react-select";



function Select(props) {

    const [inputValue, setinputValue] = useState('')

    const onInputChange = (inputValue, event) => {
        if (event.action==='input-change'){
            setinputValue(inputValue)
        }  
    }
    
    return (
            <ReactSelect
                onInputChange={onInputChange}
                inputValue={inputValue}
            />
    )
}

export default Select
person Sid    schedule 08.03.2021