Программно сфокусировать и выбрать значение в реагировать-выберите - PullRequest
Новая
       113

Программно сфокусировать и выбрать значение в реагировать-выберите

0 голосов
/ 03 мая 2020

Я хочу иметь возможность программно focus() и select() a react-select. При нажатии на Add new brand ниже:

enter image description here

должно отобразиться что-то вроде этого:

enter image description here

Вот что у меня есть.

Мой Select компонент обернут в React.forwardRef: 

const Select = React.forwardRef((props, ref) => {
  return (
    <Creatable ref={ref} {...props} />
  )
})

, так что я могу оформить его с помощью styled-components и по-прежнему есть ref на вход, например: 

const BrandSelect = styled(Select)`...`
const Button = styled.button`...`

const MyComponent = () => {

  const brandSelectRef = useRef()
  const [newBrand, setNewBrand] = useState(false)

  const handleAddBrand = () => {
    setNewBrand(true)
    console.log(brandSelectRef.current)
    if (brandSelectRef && brandSelectRef.current) {
      brandSelectRef.current.focus()
      brandSelectRef.current.select()
    }
  }

  return (
    <BrandSelect
      creatable
      openMenuOnFocus
      ref={brandSelectRef}
      defaultInputValue={newBrand ? '...' : undefined}
      // ...other required react-select props
    />
    <Button onClick={handleAddBrand}>Add new brand</Button>
  )
}

Проблема в том, что приведенный выше код не работает, то есть react-select никогда не фокусируется. Кроме того, журнал brandSelectRef.current - это undefined.

Я явно что-то здесь не так делаю, но не могу определить, что.

1 Ответ

0 голосов
/ 03 мая 2020

Я думаю, причина в том, что вы должны использовать значение по умолчанию для вашего useRef хука 

const brandSelectRef = useRef(null)
...