我想在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中使用組件構建一個簡單的計算器

回答

相關問題