Question

您好我不明白为什么我的onclick功能无法正常工作。我的函数在加载页面时创建自己2次运行，但是当我点击按钮

时却没有

＆＃13;

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

＆＃13;

Answer 1

为什么不起作用

当你传递onClick={this.create()}时，你实际上传递了函数的返回值，而不是它自己的函数。作为副作用，这也会导致在渲染发生时调用该函数，而不仅仅是在用户实际点击时。

<强>解决方案

你想要传递函数本身来调用，注意没有括号()：

onClick={this.create}

如果您需要访问点击处理中的组件实例

您还需要在方法中绑定this（组件的实例），例如要访问this.state，您必须bind该值

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

这样，create（）中的执行将具有等于组件实例的this值，允许您访问其属性和方法，如this.props，this.state和其他您在组件上定义的方法。

为什么我的onclick功能没有起作用

1 个答案: