繁体   English   中英

在 react-select 中以编程方式聚焦和 select 值

[英]Programmatically focus and select value in react-select

我希望能够以编程方式focus()select()一个react-select 点击下方的Add new brand

在此处输入图像描述

应该呈现如下内容:

在此处输入图像描述

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

我的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.currentundefined

我显然在这里做错了什么,但我看不出是什么。

我认为原因是你必须为你的useRef钩子使用默认值

const brandSelectRef = useRef(null)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM