Given the following code:

var
  React = require("react")
;

class ControlText extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    };
  }

  update() {
    console.log(event);
    this.setState({value: event.target.value});
  }

  render() {
    console.log(this.state);
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.update.bind(this)} />
  }
}

module.exports = ControlText;

Every time I log the event object in update(), it returns an object with target: null, and this.state.value updates from "" to undefined. This code diverges very little from the example on the Forms docs, why can't I seem to get an event target?

Given the following code:

var
  React = require("react")
;

class ControlText extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: ""
    };
  }

  update() {
    console.log(event);
    this.setState({value: event.target.value});
  }

  render() {
    console.log(this.state);
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.update.bind(this)} />
  }
}

module.exports = ControlText;

Every time I log the event object in update(), it returns an object with target: null, and this.state.value updates from "" to undefined. This code diverges very little from the example on the Forms docs, why can't I seem to get an event target?

• javascript
• reactjs
• event-handling
• dom-events

1 Answer 1

Add event(you can name it as you want not only event) argument to update method

update(event) {
       ^^^^^

Example