Reactjs 盖茨比onClickOut没有定义

我还使用了下面的gatsbyjs组件

从“React”导入React
从“react”导入{useState}
const ClickOutHandler=require（'react-onclickout'）；
const Searchdisplay=（{children}）=>{
常量[isToggledOn，hasInput，refresh]=useState（false）
onClickOut=（e）=>{
document.getElementsByCassName（'ais-SearchBox-input'）[0]。值=“”；
此.setState（（）=>({
输入：false，
}));
}
返回(
{儿童}
)
}
导出默认搜索显示

---

不幸的是，我收到了一个未定义onClickOut的错误！任何能帮我大忙的主意

此

将在

搜索显示中
未定义

看看您的代码，您似乎混淆了功能组件和基于类的组件。此外，您使用的
useState
不正确-虽然不会引发错误，
refresh
将设置为
undefined

const Searchdisplay=（{children}）=>{
const[isToggledOn，hasInput]=useState（false）//刷新将未定义，请删除该选项
const onClickOut=（e）=>{
document.getElementsByClassName（“ais搜索框输入”）[0]。value=“”；
hasInput（false）；//不要在这里使用this.setState，这是用于类组件的
};
返回{children}；
};

我建议您搜索函数组件和类组件之间的差异。
似乎我对hasInput（false）有问题，因为hasInput不是函数。
hasInput
将是函数
useState
将返回一个值和一个函数来更新该值。您在console中看到了什么错误？我使用以下代码{setState（（）=>（{hasInput:event.currentTarget.value！=''，}））；}/>当我使用console.log（hasInput）时，它打印未定义1）使用
className
而不是
class
；2） 你从哪里得到的
setState
？我想您需要，
hasInput（event.currentTarget.value！=''）
我得到一个错误：search.js:61 Uncaught TypeError:hasInput不是onKeyUp（search.js:61）、htmlunknowneelement.callback（react dom.development.js:188）和Object.invokeguaredcallbackdev（react dom.development.js:237）的函数（react dom.development.js:292）
import React from "react"
import { useState } from "react"
const ClickOutHandler = require('react-onclickout');


const Searchdisplay = ({children})=>{

const [isToggledOn,hasInput,refresh] = useState(false)

onClickOut = (e) => {
  document.getElementsByClassName('ais-SearchBox-input')[0].value = '';
  this.setState(() => ({
    hasInput: false,
  }));
}
  
return(
   
   <ClickOutHandler onClickOut={this.onClickOut}>
      {children}
   </ClickOutHandler>

    )

}

export default Searchdisplay