Javascript ReactJs:refs未定义（无未定义）

我阅读了参考文献和Dom，并尝试搜索与我的问题相关的任何问题或答案（我从“函数”开始，而不是“类”）

这是问题名称：“refs”未定义（无未定义）（位于

console.log（refs.okanhai.value）；

）

这是我的代码：

function ok123(){

      console.log(refs.okanhzai.value);
     }
<div className="panel panel-default">
  <div className="panel-heading">
    <h3 className="panel-title">Categories ok man</h3>
  </div>
  <div className="panel-body">
<div className="form-group">
  
              <label >Search for it</label>

<input type="text" className="form-control" ref="okanhzai"/>

  </div> 

  <button type="submit" className="btn btn-primary" onClick = { ok123() }> Save </button>  

函数ok123（）{ console.log（参考Okanzai.value）； } 好男人 搜索它 拯救 我正在尝试将输入值打印到控制台。如果我的代码有任何潜在的bug或错误，请至少帮我指出。我将感谢任何进一步提供的帮助。^ u^。谢谢

• 我认为html应该首先包装为React组件。然后可以开始使用ref属性

• 在下面的代码中，我将您的代码包装为一个函数组件，并使用React.createRef（）创建一个ref并分配给Okanhai。Okanhai.current.value存储当前输入

const-App=（）=>{
const okanhzai=React.createRef（null）；
函数ok123（）{
log（okanhai.current.value）；
}
返回(
好男人
搜索它
拯救
)
}
const container=document.querySelector（'#root'）；
render（，容器）


我认为html应该首先包装为React组件。然后可以开始使用ref属性


在下面的代码中，我将您的代码包装为一个函数组件，并使用React.createRef（）创建一个ref并分配给Okanhai。Okanhai.current.value存储当前输入




const-App=（）=>{
const okanhzai=React.createRef（null）；
函数ok123（）{
log（okanhai.current.value）；
}
返回(
好男人
搜索它
拯救
)
}
const container=document.querySelector（'#root'）；
render（，容器）

您在哪里定义了参照？请检查是否已将REF定义为变量。您在哪里定义了REF？请检查是否已将refs定义为变量。