CODEWITHSUNDEEP
javascriptreactjsdom-events
A. L
A. L

Reputation: 12669

react - how to pass event from another class

What I have

I have a class that's not being exported but being used internally by a file. (The classes are all in the same file)

class SearchResults extends Component {
  constructor()
  {
      super();
      this.fill_name = this.fill_name.bind(this);
  }

  fill_name(event, name)
  {
      console.log("search results", event.target);
      this.props.fill_name(name, event.target);
  }

  render()
  {
      return (
          <div className="search-results-item" onClick={ () => this.fill_name(event, this.props.name)}>
              <div className="highlight">
                  {this.props.name}
              </div>
          </div>
      )
  }
}

I'm trying to get the <div> element to be sent back to the parent, which is defined below (skipping irrelevant stuff):

class PublishComponent extends Component {
  fill_name(name, me)
  {
      console.log(me);
      $("#company_input").val(name);
      this.setState({ list: { ...this.state.list, company: [] } });
  }
}

me is the event.

What I'm getting

The console posts the following:

search results <react>​</react>​
undefined

so the event.target is <react></react> for some reason, while the me is getting undefined.

Expected behaviour

It should return the element i.e. <div className="search-results-item"...></div>

Upvotes: 2

Views: 1934

Answers (2)

Ritesh Bansal
Ritesh Bansal

Reputation: 3248

This should work for you:

class SearchResults extends Component {
  constructor() {
    super();
    this.fill_name = this.fill_name.bind(this);
  }

  fill_name() {
    this.props.fill_name(this.props.name, this.ref)
  }

  render() {
    return (
      <div className="search-results-item" ref={ref => { this.ref = ref }} onClick={this.fill_name}>
        <div className="highlight">
          {this.props.name}
        </div>
      </div>
    )
  }
}

Upvotes: 1

Faris
Faris

Reputation: 544

You are not passing the event object

Change This

<div
  className="search-results-item"
  onClick={() => this.fill_name(event, this.props.name)}
/>

To This 

<div
  className="search-results-item"
  // pass the event here
  onClick={event => this.fill_name(event, this.props.name)}
/>

Upvotes: 2

Related Questions