CODEWITHSUNDEEP
javascriptreactjs
Ilja
Ilja

Reputation: 46479

Call parent function onChange

Here is a snippet from my component:

...

  handleChange(event) {
    this.setState({text: event.target.value});
    this.props.onChange;
  }

  //Render
  render() {
    return (
      <input
        onChange={ this.handleChange.bind(this) }
        value={ this.state.text }
        type="text" />
    );
  }
}

...

That I am calling inside another component in the following way

searchListing(event) {
    console.log("Test");
  }

  //Render
  render() {
    return (
      <div className="story-block-content">
        <TextInput onChange={this.searchListing.bind(this)} />
      </div>
    );
  }

I assumed the onClick will pass through and every time I type something I will see "Test" print in console. But this is not the case as I can't see anything.

If I however wrap this.props.onChange; inside my first component inside console.log like so console.log(this.props.onChange) I get following output in console:

    function searchListing(event) {
      console.log("Test");
    }

So I think the onClick is going through, but not calling function somehow.

Upvotes: 3

Views: 1535

Answers (1)

lupatus
lupatus

Reputation: 4248

you have to call onChange

handleChange(event) {
    this.setState({text: event.target.value});
    this.props.onChange(); // <-- you forgot ()
    // or like this if you want to pass event:
    //this.props.onChange(event);
    // or like this to pass new value:
    //this.props.onChange(event.target.value);
}

Upvotes: 4

Related Questions