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，而是引用createClickableDiv，它没有定义函数onDivClick。

尝试将函数调用更改为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的问题

1 个答案: