/Javascript/React/Get value of input react

Get value of input react

React text input onchange

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Source: reactjs.org

Get value of input react

import { useState } from 'react';

function myFunctionalComponentFunction() {
  const [input, setInput] = useState(''); // '' is the initial state value
  return (
    <div>
    <label>Please specify:</label>
    <input value={input} onInput={e => setInput(e.target.value)}/>
    </div>
  );
}

Source: stackoverflow.com

Get value of input element on button click react

const input = props => {

let textInput = React.createRef();

function handleClick() {
  console.log(textInput.current.value);
}

return (
    <div>
      <input ref={textInput} placeholder="Type a message..." />
      <div onClick={handleClick} className="icon">
        <i className="fa fa-play" />
      </div>
    </div>
  )
}

Source: stackoverflow.com

Similar codes

21 votes133 views3 answers
Hide header bar react navigation
Javascript React
0 vote204 views1 answer
Create react app node: internal/modules/cjs/loader:936throw err;^Error: Cannot find module 'react-scripts/scripts/init.js'
Javascript React
0 vote202 views1 answer
React native dynamic style
Javascript React
9 votes226 views2 answers
Html emmet in react vscode
Javascript React
0 vote273 views1 answer
How to solve "Unexpected use of comma operator no-sequences" error in react
Javascript React
0 vote190 views2 answers
Batch react-redux
Javascript React
2 votes190 views2 answers
Easiest way to show current date in react
Javascript React
3 votes187 views1 answer
React arrays
Javascript React
27 votes230 views4 answers
Font awesome react npm
Javascript React
0 vote325 views1 answer
How to change tab color react bootstraps customixation
Javascript React