reactjs - 以编程方式聚焦并选择 react 选择中的值

Question

我希望能够以编程方式focus()和select()进行react-select。点击下面的添加新品牌:

应该呈现这样的内容:

这是我到目前为止所拥有的。

我的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。

我显然在这里做错了什么，但我无法发现什么。

Answer 1

我认为原因是您必须使用 useRef Hook 的默认值

const brandSelectRef = useRef(null)