CODEWITHSUNDEEP
javascriptreactjsfunction
Thanh Vinh
Thanh Vinh

Reputation: 95

ReactJs: refs is not defined (no-undef)

I have read the Refs and the Dom as well as try searching for any question or answer which could relate to my problem (I start with "function" instead of "class").

this is the problem name: 'refs' is not defined (no-undef) (at console.log(refs.okanhzai.value);)

and this is my code:

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>

I am trying to print my input value to the console. If my code has any potential bug or error, please help me point it out at least. I will appreciate any further given help. ^_^. Thanks!

Upvotes: 0

Views: 8392

Answers (2)

Sabir Hussain
Sabir Hussain

Reputation: 1

import "ref" from firebase/storage

import { ref } from 'firebase/storage';

Upvotes: 0

Alan
Alan

Reputation: 121

  • I think the html should be wrapped as a React Component first. Then you can start using ref attribute.

  • In the following code, I wrapped your code a function component and use React.createRef() to create a ref and assign to okanhzai. The okanhzai.current.value stores the current input.

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>

Upvotes: 3

Related Questions