為什么我的onclick功能沒有起作用

Question

嗨，我不明白為什么我的onclick功能不起作用。 我的函數在頁面加載時創建自己運行2次，但是當我點擊按鈕時卻沒有

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

Answer 1

為什么它不起作用

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

解

你想傳遞函數本身來調用，注意沒有括號() ：

onClick={this.create}

如果需要在單擊句柄中訪問組件實例

您還需要在方法中綁定this （組件的實例），例如，要訪問this.state您必須綁定該值

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

這樣，create（）中的執行將具有與組件實例相等的this值，允許您訪問其屬性和方法，如this.props ， this.state和您在組件上定義的其他方法。