Question

我有代码：

var React = require('react');

class MasterLayout extends React.Component {

    constructor(props) {
        super(props);
        console.log("I am constructor");
        this.getComponent = this.getComponent.bind(this);
        this.testMethod = this.test.bind(this);
        this.testMethod();
    }

    test() {
        console.log("test method called");
    }

    getComponent(ev) {
        console.log('li item clicked!');
        event.currentTarget.style.backgroundColor = '#ccc';
    }


    render() {
        return (
            <div>
                <h3 id={this.props.id} onClick={this.getComponent}>qqqqqqqqqqqqqqqqqqqq</h3>
            </div>

        )
    }
};

module.exports = MasterLayout;

当我运行节点服务器并转到localhost页面时，页面会成功呈现，没有任何错误。

单击h3元素后没有任何反应。

什么是pagge加载我进入控制台：

I am constructor
test method called

点击h3后，没有任何反应。我的代码有什么问题？

编辑：

onclick="console.log('The link was clicked.'); return false">也无法正常工作。

Answer 1

<h3 id={this.props.id} onClick={this.onClick}>CLICK ME</h3>

除非我遗漏某些内容，否则onClick

中不会有MasterLayout方法

您确定不想在onHeaderClicked中创建MasterLayout（示例）方法，将其绑定在构造函数中，并使用它代替this.onClick吗？ / p>

Answer 2

将test（）方法更改为命名为onClick（）：

var React = require('react');

class MasterLayout extends React.Component {

    constructor(props) {
        super(props);
        console.log("I am constructor");
        this.getComponent = this.getComponent.bind(this);
        this.testMethod = this.test.bind(this);
        this.testMethod();
    }

    onClick() {
        console.log("test method called");
    }

    getComponent(ev) {
        console.log('li item clicked!');
        event.currentTarget.style.backgroundColor = '#ccc';
    }




    render() {
        return (
            <div>
                <h3 id={this.props.id} onClick={this.onClick}>CLICK ME</h3>
            </div>

        )
    }
};

module.exports = MasterLayout;

或者如果您尝试调用getComponent（）方法，请在渲染代码中更改它以使用它：

render() {
  return (
    <div>
        <h3 id={this.props.id} onClick={this.getComponent}>CLICK ME</h3>
    </div>

  )
}

或者如果要同时调用它们，请在第一个方法调用功能块中调用第二个方法：

getComponent(ev) {
  console.log('li item clicked!');
  event.currentTarget.style.backgroundColor = '#ccc';
  this.onClick();
}

Answer 3

当您点击h3时没有任何反应，因为点击后您将收到cannot read property currentTarget of undefined错误，因为您收到的事件参数为ev，并将其用作event }

您需要将getComponent方法修改为

getComponent(ev) {
    console.log('li item clicked!');
    ev.currentTarget.style.backgroundColor = '#ccc';
}

React函数绑定不适用于nodejs

3 个答案: