Question

我正在尝试使用组件在React中构建一个简单的计算器。我想获取按钮的值并将其分配给“currentItem”，但是，我不断收到错误“无法读取属性'setState'的null”。这是代码。代码在2个单独的jsx文件中。我非常感谢你的帮助。

import React from 'react';
import NumbersComponent from './NumbersComponent.jsx';
import EquationComponent from './EquationComponent.jsx';
import FunctionComponent from './FunctionComponent.jsx';

require('../../stylesheets/component/CalculatorModule.scss');

export default class CalculatorModule extends React.Component {
    constructor() {
        super();
        this.state = {
            currentItem:"0"
        }
    }
    render() {
        return (
            <div className="calculatorWrapper">
                <div className="display">
                    <div>{this.state.currentItem}</div>
                </div>

                <section className="controlArea">
                    <FunctionComponent/>
                    <div>
                        <NumbersComponent/>
                        <EquationComponent/>
                    </div>
                </section>

            </div>
        )
    }
}

import React from 'react';

require('../../stylesheets/component/NumbersComponent.scss');

export default class NumbersComponent extends React.Component {

    render() {
        return (
            <div className="buttonBoxLeft">
                <button type="button" value="1" onClick={this.handleClick}>1</button>
                <button type="button" value="2" onClick={this.handleClick}>2</button>
                <button type="button" value="3" onClick={this.handleClick}>3</button>
                <button type="button" value="4" onClick={this.handleClick}>4</button>
                <button type="button" value="5" onClick={this.handleClick}>5</button>
                <button type="button" value="6" onClick={this.handleClick}>6</button>
                <button type="button" value="7" onClick={this.handleClick}>7</button>
                <button type="button" value="8" onClick={this.handleClick}>8</button>
                <button type="button" value="9" onClick={this.handleClick}>9</button>
                <div className="zeroSection">
                    <button value="0" id="zero">0</button>
                </div>
            </div>
        )
    }
    handleClick(){
        this.setState({
            currentItem: this.value
        })
    }
}

Answer 1

看起来您正在使用ES6，在这种情况下，您需要bind事件处理程序的this上下文，否则this未定义。在ES6中，类不会自动bind此this上下文，您必须明确地执行此操作。

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

甚至更好，在构造函数中执行此操作，对于整个组件bind将constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); }一次，the recommended method.

this

编辑：再看一下，看起来您正试图获取点击按钮的boolean = True def pass_this_in(): print("I just did some stuff") def the_try_except_bit(function): try: if boolean: function() except: print("Excepted") # Calling the above code the_try_except_bit(pass_this_in)上下文，以便您可以获取其值。你应该做的是将“value”属性移动到组件状态，在这种状态下可以毫无问题地读取和修改它们。不要在DOM中存储信息，将其显式存储在React状态。

Answer 2

错误来自handleClick（）函数中的“this”上下文，而不是您认为的反应组件。

要将'this'作为反应组件，您可以使用箭头功能，如下所示：

hashset *newset= new_hashset;
char *info="1234";
put_hashset (newset,info);

注意：我假设您正在使用babel（以及Class properties transform plugin）因为您正在使用es6类。但如果情况并非如此，那么手动绑定“this”，正如之前的答案所暗示的那样，是一个不错的选择。

我正在尝试使用组件在React中构建一个简单的计算器

2 个答案: