爲什麼我的onclick函數在反應中不起作用

嗨，我不明白爲什麼我的onclick函數不起作用。我的函數來創建自己運行時間2在頁面加載但不是當我點擊按鈕爲什麼我的onclick函數在反應中不起作用

import React, { Component, PropTypes } from 'react'; 
 
import { createContainer } from 'meteor/react-meteor-data'; 
 
import { Topics } from '../api/topic.js'; 
 
import Topic from './Topic.jsx'; 
 

 
class AppCreate extends Component { 
 

 

 

 
render(){ 
 

 
    return(
 
    <div className="container"> 
 
     <form> 
 
     <input type="text" placeholder="donnez un nom a votre Topic" className="topic"></input> 
 
     <input type="button" value="Créer" onClick={this.create()}></input> 
 
     </form> 
 
    </div> 
 
); 
 

 
    } 
 
    create(e){ 
 
    {var test = document.getElementsByClassName("topic").value; 
 
    console.log(test);} 
 
    } 
 
} 
 

 

 

 
AppCreate.propTypes = { 
 
topics: PropTypes.array.isRequired 
 
}; 
 

 

 
export default createContainer(() => { 
 
return { 
 
    topics: Topics.find({}).fetch(), 
 
}; 
 
}, AppCreate);

來源

2017-07-07 alpheonix

[React onClick函數在渲染時觸發]可能重複（https://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render） –

爲什麼它不工作

當你通過onClick={this.create()}你實際上是傳遞函數的返回值，而不是它自己的函數。作爲副作用，這也會導致在渲染髮生時調用該函數，而不僅僅是當用戶實際點擊時。

解決方案

你想通過函數本身被調用，注意有沒有括號()：

onClick={this.create}

如果您需要訪問點擊的組件實例處理

您還需要綁定this（th例如你的組件的實例），例如訪問this.state你必須bind那些重視

onClick={this.create.bind(this)}

有了這個執行的內部創建（）將有一個this值等於您的組件的情況下，允許您訪問其屬性和方法，如this.props,this.state和您在組件上定義的其他方法。

來源

2017-07-07 12:50:15 bakkal

看起來像他缺少綁定的創建函數... this.create = this.create.bind（this） – Yoeri

它的工作非常感謝@bakkal – alpheonix

如果我使用這個函數我必須使用bind（this）？什麼是綁定（這）？ – alpheonix

爲什麼我的onclick函數在反應中不起作用

回答

相關問題