How to get Input value in React

Function Components

Creating Refs

import React, {createRef} from 'react';const Form = () => {
let email = createRef();
function click() {
console.log(email.current.value);
}
return <div>
<input type="text" ref={email}/>
<button onClick={click}>Submit</button>
</div>
}
export default Form;

When you click the button onClick button will call click function and log the value of input email in console.

onChange Event

import React from 'react';const Form = () => {
function change(email){
console.log(email.target.value)
}
return <div>
<input type="text" onChange={change}/>
<button>Submit</button>
</div>
}
export default Form;

When you text in input box , onChange will call change function works and log input value in console.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cho Zin Thet

Cho Zin Thet

Learning javascript and web-development