React 组件中的 onClick 问题

Question

我有一个包含 div 的搜索结果组件，单击该组件应该会打开一个模式。下面是相关代码：

const createClickableDiv = function(props){
  if(props.searchType === 'option1'){
    return (
      <div onClick={this.onDivClick}>
       <div>Some content</div>
      </div>
    );
  }else if(props.searchType === 'option2'){
    return (
      <div onClick={this.onDivClick}>
       <div>Some other content</div>
      </div>
    );
  }
  return (<div className="result-empty"></div>);
};



class SearchResultItem extends Component{
  constructor(props){
    super(props);
  }
  onDivClick(){
    AppUIActions.openModal((<Modal />));
  }
  render(){
    const clickableDiv = createClickableDiv(this.props);
    return (
      <div>
        {clickableDiv}
      </div>
  }
}

当我加载页面时，没有显示任何内容。但是，当我从 div 中删除 onClick={this.onDivClick} 时，一切都正确呈现，只是没有所需的点击功能。我在 createClickableDiv 函数中的代码周围放置了一个 try-catch，它说 this 未定义。我不太确定从这里到哪里去。

谢谢！

Answer 1

this. 有时会表现得很奇怪。当您的函数 createClickableDiv 被调用时，this 不再引用您的 SearchResultItem，而是引用没有定义函数 onDivClick 的 createClickableDiv。

尝试将函数调用更改为 createClickableDiv(this)，以将指针传递给完整的 SearchResultItem，并将函数本身更改为：

const createClickableDiv = function(caller){
  if(caller.props.searchType === 'option1'){
    return (
      <div onClick={caller.onDivClick}>
       <div>Some content</div>
      </div>
      // etc..

也许这样行得通。

React 组件中的 onClick 问题

Issue with onClick in React component

onclick

reactjs

react-jsx