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

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

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

来源

2016-10-10 Lonnie McGill

它看起来像你使用ES6，在这种情况下，你需要bind的this上下文事件处理程序，否则this是不确定的。在ES6中，类不会自动bind这个this上下文，你必须明确地做到这一点。

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

甚至更好，这样做在构造函数中，这将bind一次为整个组件，它是the recommended method.

constructor(props) { 
    super(props); 
    this.handleClick = this.handleClick.bind(this); 
}

编辑：虽然再来看，它看起来像你想获取单击按钮的this上下文，以便您可以获取其值。你应该做的是将“值”属性移动到组件状态，在那里它们可以被读取和修改而不会出现问题。不要将信息存储在DOM中，将其明确地存储在React状态中。

来源

2016-10-10 22:43:31 jered

谢谢你解决了这个问题。我仍然对编码不熟悉。你能解释一下你的意思吗？“你应该做的就是将”value“属性移动到组件状态，在那里它们可以被读取和修改而不会出现问题。不要将信息存储在DOM中，将它明确地存储在React状态中。？我真的很想在React中学习正确的编码方式。 –

@LonnieMcGill您是否阅读过官方文档以及完成教程？在React中，“状态”就像组件内部的一组变量和条件。有关组件如何呈现和行为的信息将保存在“状态”中，以便可以轻松读取和修改组件。来自“状态”的数据应该流入并以HTML DOM元素呈现，而不是相反。这是React的基本原则。 https://facebook.github.io/react/docs/getting-started.html – jered

谢谢。我从教程中学到了大部分React。所以我现在开始阅读文档。尽管如此，谢谢你回答如此之快。 –

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

保持“这个”作为你的反应组件，您可以使用方向的功能，如：

handleClick =() => { 
    this.setState({ 
     currentItem: this.value 
    }) 
}

注：我假设你正在使用巴贝尔（和Class properties transform plugin），因为你使用es6类。但是，如果不是这种情况，像以前的答案所表明的那样手动绑定“this”是一个不错的选择。

来源

2016-10-10 22:43:54 Colmea

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

回答

相关问题