How do i access the value inside the input text box? cant i fetch the value directly from the event-CodePudding

I am trying to access the value inside the textbox and save it in the state variable. Can i access it without using "ref". Also the statement:

console.log(this.input.value)

Prints the correct input in the console. But if i do below:

ref ={(input)=>{
this.input = input
console.log(input.value)
}}

I get an error. Please help me understand whats going on in the complete code below.

           <input type="text" 
            className = "form-control form-control-lg"
            placeholder ='0'
            onChange = {async (event)=>{
                const tokenValue = await this.input.value.toString() * 100
                console.log(this.input.value)
                this.setState ({
                    output:tokenValue
                })
                console.log(this.state.output)
            }}
            ref ={(input)=>{this.input = input}}
            required/>

CodePudding user response：

You can get input value easily like following

export default function App() {
  const [value, setValue] = useState();

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <form>
        <input
          type="text"
          value={value}
          onChange={(e) => handleInputChange(e)}
        />
      </form>
    </>
  );
}