react input text onchange target method

Raymund Alum answered on May 31, 2020 Popularity 9/10 Helpfulness 2/10

answer react input text onchange target method

related react text input onchange

react input text onchange target method

Comment

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      data: 'Bound data...'
    }
    this.updateState = this.updateState.bind(this);
    
  };
  updateState(e) {
    this.setState({data: e.target.value});
  }
  render() {
    return (
    <>
        <input type="text" value = {this.state.data} onChange = {this.updateState} />
        <h4>{this.state.data}</h4>
        </>
             );
  }
}
        ReactDOM.render(
        <App />, document.getElementById('mountNode') );

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: jscomplete.com

Tags: input javascript onchange text

Link to this answer
Share Copy Link

Contributed on Jul 05 2022

Raymund Alum

0 Answers Avg Quality 2/10

Closely Related Answers

react text input onchange

Comment

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>
    );
  }
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: reactjs.org

Tags: input inpu

Link to this answer
Share Copy Link

Contributed on May 31 2020

Tired Trout

0 Answers Avg Quality 2/10

react input text onchange target method

Contents

More Related Answers

react input text onchange target method

Closely Related Answers

react text input onchange

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.