Tuesday, June 16, 2020

[React][Resolved] Event handler with argument.

Incorrect source code, id to print in console is an object
class SearchPanel extends React.Component {
  handleSearchChange(id){
    console.log(id)
  }
  render() {
    return (
      <form id="search-panel">
        <span>Name</span>
        <input id="keyword" type="text" onChange={this.handleSearchChange} />
        <input type="submit" />
      </form>
    );
  }
}

Corrected code:
class SearchPanel extends React.Component {
  handleSearchChange(id){
    console.log(id)
  }
  render() {
    return (
      <form id="search-panel">
        <span>Name</span>
        <input id="keyword" type="text" onChange={()=>this.handleSearchChange("keyword")} />
        <input type="submit" />
      </form>
    );
  }
}

result should be is "keyword

Reference:
https://stackoverflow.com/questions/54878024/getting-id-from-an-event-handler-that-was-passed-to-a-button-component-in-react

No comments :

Post a Comment