反应 - 如何从另一个类传递事件

时间:2017-06-15 06:17:52

标签: javascript reactjs javascript-events

我拥有什么

所以我有一个类没有被导出但是被文件内部使用。 (这些类都在同一个文件中)

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

我正在尝试将<div>元素发送回父级,这在下面定义(跳过不相关的东西):

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

me

我得到了什么

控制台发布以下内容:

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

因为某种原因,event.target为<react></react>,而me未定义。

预期行为

它应该返回元素,即<div className="search-results-item"...></div>

2 个答案:

答案 0 :(得分:2)

您没有传递FOR vertex[, edge] IN ANY SHORTEST_PATH **5111454** TO **5454** GRAPH graphName [OPTIONS options] FOR vertex[, edge] IN ANY SHORTEST_PATH **5111454** TO **59812** GRAPH graphName FOR vertex[, edge] IN ANY SHORTEST_PATH **5111454** TO **54754** GRAPH graphName [OPTIONS options] FOR vertex[, edge] IN ANY SHORTEST_PATH **5111454** TO **589895** GRAPH graphName [OPTIONS options] 对象

更改此

event

到此

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

答案 1 :(得分:1)

这应该适合你:

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