Question

我已经阅读了裁判和Dom，并尝试搜索可能与我的问题有关的任何问题或答案（我从“函数”而不是“类”开始）。

这是问题名称：未定义'refs'（no-undef）（位于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>

ReactJs：refs未定义（no-undef）

1 个答案: