React stateless component this.refs..value?

by

You can use refs inside stateless components.

Here is also my example fiddle that shows you how it works.

import React from 'react'

export default ({ onChange }) => {
  let cityInput

  const onSubmit = e => {
    e.preventDefault()
    onChange(cityInput.value)
  }

  return (
    <form onSubmit={ onSubmit }>
      <input type="text" placeholder="Enter City Name"
        ref={ el => cityInput = el } />
      <button>Go!</button>
    </form>
  )
}

Note: Although this is one way to do it, however, this approach is not recommended unless you really need it. Try to think about more on redesigning your React code instead of hacking it like this. You may read more about it here.

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. Error : Cannot read property ‘map’ of undefined
  4. Clear and reset form input fields
  5. How to resolve “Cannot use import statement outside a module” in jest
  6. Hide keyboard in react-native
  7. React app exiting in docker container with exit code 0
  8. When giving unique keys to components, is it okay to use Math.random() for generating those keys?
  9. How to import and export components using React + ES6 + webpack?
  10. Should flux stores, or actions (or both) touch external services?
  11. React-Router open Link in new tab
  12. How to set a default value in react-select
  13. ReactJS with ES6: this.props is not a function when I communicate two components
  14. useNavigate() may be used only in the context of a component
  15. Testing React components that fetches data using Hooks
  16. Why React useState with functional update form is needed?
  17. What is the difference between using constructor vs getInitialState in React / React Native?
  18. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  19. How to hash CSS class names in Nextjs?
  20. How can I use Fabric.js with React?
  21. Change language to JSX in Visual Studio Code
  22. Passing object as props to jsx
  23. create-react-app: how to use https instead of http?
  24. Disable ESLint that create-react-app provides
  25. Webpack & Typescript image import
  26. Passing values through React-Router v4
  27. How to import a .txt file from my source?
  28. React Router work on reload, but not when clicking on a link
  29. create-react-app is not working since version 4.0.1
  30. ‘React’ was used before it was defined

Leave a Comment