ReactJs: refs 未定义 (no-undef)

Question

我已经阅读了 Refs 和 Dom，并尝试搜索可能与我的问题相关的任何问题或答案（我从“函数”而不是“类”开始）。这是问题名称：'refs' 未定义 (no-undef) (at console.log(refs.okanhzai.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>  我正在尝试将我的输入值打印到控制台。如果我的代码有任何潜在的错误或错误，请至少帮我指出。我将不胜感激任何进一步的帮助。^_^。谢谢！

Answer 1

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

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

const App = () => {

  const okanhzai = React.createRef(null);

  function ok123(){

    console.log(okanhzai.current.value);

  }

  return (

    <div>

      <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>

        </div>

      </div>

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

    </div>

  )

}

const container = document.querySelector('#root');

ReactDOM.render(<App />, container);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>