React:onClick on按钮不起作用

时间:2017-08-14 16:49:59

标签: javascript node.js reactjs

过去一小时,我一直试图让它发挥作用。 onClick任何按钮根本不起作用...我做错了什么?

const React = require('react');

class Questionnaire extends React.Component {
constructor (props) {
    super(props);
    this.state = { selectedSection: 0 };
}

selectSection (e) {
    console.log(e);
}

render () {
    return (
        <div>
            <div className='btn-group mr-2' role='group'>
                <button className='btn btn-primary' onClick={this.selectSection}>A</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>B</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>C</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>D</button>
          </div>
        </div>
    );
}
}

 module.exports = Questionnaire;

我应该提一下,我正在使用express-react-views

4 个答案:

答案 0 :(得分:0)

我认为onClick的参数应该是要计算的表达式,而不是要计算的表达式,然后执行结果。换句话说,我认为代码应该是:

  <button className='btn btn-secondary' onClick={this.selectSection()}>D</button>

与parens。

答案 1 :(得分:0)

试一下

    const React = require('react');

    class Questionnaire extends React.Component {
    constructor (props) {
        super(props);
        this.state = { selectedSection: 0 };
    }

    selectSection = function(e){
    console.log(e);
  }

    render () {
        return (
            <div>
                <div className='btn-group mr-2' role='group'>
                    <button className='btn btn-primary' onClick={this.selectSection}>A</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>B</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>C</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>D</button>
              </div>
            </div>
        );
    }
    }

答案 2 :(得分:0)

您需要将函数绑定到组件,如下所示:

sqlContext.read.format("csv").load("/home/cloudera/works/JavaKafkaSparkStream/input/input_1.csv","/home/cloudera/works/JavaKafkaSparkStream/input/input_2.csv")

保持其他一切

答案 3 :(得分:0)

您需要将方法绑定到类。将此行添加到构造函数:

this.selectSection = this.selectSection.bind(this);