提取组件时，无法读取null错误的属性“”focus“”
提取组件时，无法读取null错误的属性“”focus“”
提问于 2020-07-13 09:10:46
我想实现与蚂蚁设计自动完成Algolia搜索。但是当我试图提取SearchInput组件时，我得到了Cannot read property 'focus' of null错误(没有提取，也就是说，当我把它放在同一个文件中时，它工作得很好)。以下是工作代码：
import React, { useState } from 'react'
import { AutoComplete, Input } from 'antd'
const SearchAutocomplete = connectAutoComplete(
({ hits, currentRefinement, refine }) => {
...
return (
<AutoComplete
options={options}
onSelect={onSelect}
onSearch={handleSearch}
open={open}
>
<Input
value={currentRefinement}
onChange={e => refine(e.currentTarget.value)}
/>
</AutoComplete>
);
}
);但是，当我将Input移到像这样的单独组件时，它不起作用：
import React, { useState } from 'react'
import { AutoComplete } from 'antd'
import SearchInput from './SearchInput'
const SearchAutocomplete = connectAutoComplete(
({ hits, currentRefinement, refine }) => {
...
return (
<AutoComplete
options={options}
onSelect={onSelect}
onSearch={handleSearch}
open={open}
>
<SearchInput value={currentRefinement} onChange={e => refine(e.currentTarget.value)}/>
</AutoComplete>
);
}
);以及SearchInput组件本身：
import React from 'react'
import { Input } from 'antd'
const SearchInput = props => {
const { value, onChange} = props;
return (
<Input
value={value}
onChange={onChange}
/>
)
}下面是指向codesandbox的链接，其中包含提取的组件。如何修复此错误？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-13 13:24:05
在SearchInput中添加React.forwardRef()解决了这个问题：
const SearchInput = React.forwardRef((props, ref) => {
const { onChange } = props;
return (
<Input.Search
onChange={onChange}
ref={ref}
/>
)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62872707
复制相关文章
相似问题
为什么我不能做悬停？
为什么我不能做全屏
为什么我不能做'cout << 3*“;'？
为什么我不能做黄瓜呢？
为什么我不能做这个更新？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
