2017-08-21 4 views
0

私はReactで電卓を作成していますが、私はdisplayValueという状態値を持っています。私は自分のoperationsMethodの1つを実行すると未定義のまま戻ります。誰かが助けてくれれば、間違って何をしているのか分かりません。ありがとうございます。CalcアプリケーションReact定義なし

私はperformOperationメソッドで何かをしなければならないと思っていますが、正確に何がわかりません。

const computedValue = operations[operator](nextValue, currentValue); 

とにかく、変数名は少し誤解を招くようです:

export default class App extends Component { 
    constructor(props) { 
    super(props) 

    this.state = {displayValue: '0' , waitingForOperand: false, operator: null, value: null} 
    this.inputDigit = this.inputDigit.bind(this); 
    this.inputDot = this.inputDot.bind(this); 
    this.clear = this.clear.bind(this); 
    this.toggleSign = this.toggleSign.bind(this); 
    this.performOperation = this.performOperation.bind(this); 
    } 

    clear() { 
    const {displayValue} = this.state; 
    this.setState({ 
     displayValue: '0' 
    }); 
    } 

    inputDigit(digit) { 
    const {displayValue, waitingForOperand} = this.state; 
    if(waitingForOperand) { 
     this.setState({ 
     displayValue: String(digit), 
     waitingForOperand: false 
     }); 
    } else { 
    this.setState({ 
     displayValue: displayValue === '0' ? String(digit) : displayValue + digit 
    }); 
    } 
    } 

    inputDot() { 
    const {displayValue, waitingForOperand} = this.state; 
    if(waitingForOperand) { 
     this.setState({ 
     displayValue: '.', 
     waitingForOperand: false 
     }); 
    } 
    else if(displayValue.indexOf('.') === -1) { 
     this.setState({ 
     displayValue: displayValue + '.' 
     }); 
    } 
    } 

    toggleSign() { 
    const {displayValue} = this.state; 

    this.setState({ 
     displayValue : displayValue.charAt(0) === '-' ? displayValue.substring(1) : '-' + displayValue 
    }) 
    } 

    percent() { 
    const {displayValue} = this.state; 
    const value = parseFloat(displayValue); 

    this.setState({ 
     displayValue: String(value/100) 
    }); 
    } 

    performOperation(nextOperator) { 
    const {displayValue, operator, value} = this.state; 
    const nextValue = parseFloat(displayValue); 

    const operations = { 
     '/' : (prevVal, nextValue) => prevVal/nextValue, 
     '*' : (prevVal, nextValue) => prevVal * nextValue, 
     '+' : (prevVal, nextValue) => prevVal + nextValue, 
     '-' : (prevVal, nextValue) => prevVal - nextValue, 
     '=' : (prevVal, nextValue) => nextValue 
    } 

    if(value == null) { 
     this.setState({ 
     value: nextValue 
     }); 

    } else if(operator) { 
     const currentValue = value || 0; 
     const computedValue = operations[operator](currentValue, computedValue); 

     this.setState({ 
     value: computedValue, 
     displayValue: String(computedValue) 
     }) 
    } 

    this.setState({ 
     waitingForOperand: true, 
     operator: nextOperator 
    }) 
    } 
+0

これはなぜですか? 'displayValue:String(computedValue) '? – Umesh

答えて

1

はそれがあるべきperformOperations

const computedValue = operations[operator](currentValue, computedValue); 

でこのラインに問題があります。