我希望能够以编程方式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.current
是undefined
。
我在这里显然做错了,但是我找不到。
答案 0 :(得分:0)
我认为原因是您必须为useRef
挂钩使用默认值
const brandSelectRef = useRef(null)