为什么我的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和您在组件上定义的其他方法。