/Javascript/React/React text input onchange

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

Handle onchange react

import React, { Component } from 'react';

import './App.css';
import Header from './Header';

class App extends Component {

  constructor(props) {
    super(props);
   this.state = {name: "Michael"}

  }
   changeTitle = (e) =>{
      this.setState({name: e.target.value});
    }

  render() {
    return (
      <div className="App">
        <Header title={this.state.name}/>
        <p className="App-intro">
          Type here to change name.
        <input type="text" onChange={this.changeTitle}/>
        </p>
      </div>
    );
  }
}

export default App;

Source: stackoverflow.com

Similar codes

0 vote385 views1 answer
React-file-base64
Javascript React
3 votes374 views1 answer
Latest react version npm
Javascript React
0 vote411 views2 answers
React how to change localhost url
Javascript React
1 vote374 views3 answers
Autocomplete react
Javascript React
0 vote363 views1 answer
React native fade in fade out animation
Javascript React
0 vote393 views1 answer
React password hashing
Javascript React
15 votes386 views3 answers
Image react native
Javascript React
10 votes332 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
11 votes403 views3 answers
React app and tailwind
Javascript React
1 vote398 views1 answer
React map array limit
Javascript React