onClick在React組件中的問題

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.. 

也許這會工作。