React.jsのフィボナッチカウンター

Question

私はReactの初心者です。私はフィボナッチ配列のためのカウンターをしようとしています。フィボナッチシーケンスがわからない人はguideです。それは冒頭で働いてから、シーケンスを外し始めます。私はフィボナッチシーケンスの数字を表示し、シーケンスを上下に動かしたいと思っています。ここではどのような私のコードは、これまでのところです：

import React, { Component } from 'react'; 

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

    this.state = { 
     previous1: 1, 
     previous2: 1, 
     count: 1 
    } 

    this.clickDecrease = this.clickDecrease.bind(this); 
    this.clickIncrease = this.clickIncrease.bind(this); 
    } 

    clickIncrease(e) { 
    this.setState({ 
     previous1: this.state.count, 
     previous2: this.state.previous1, 
     count: this.state.previous1 + this.state.previous2 
    }); 
    } 

    clickDecrease(e) { 
    this.setState({ 
     previous1: this.state.previous2, 
     previous2: this.state.count - this.state.previous1, 
     count: this.state.previous1 
    }); 
    } 

    render() { 
    return (
     <div> 
     The current number is: {this.state.count} 
     <button onClick={this.clickDecrease} className="btn btn-danger">-</button> 
     <button onClick={this.clickIncrease} className="btn btn-primary">+</button> 
     </div> 
    ); 
    } 
} 

私は次のシーケンスを得るためにそれらを追加できるような状態のプロパティに最後の2つの数値を保存しようとしました。しかし、それは動作していないようです。これをより良くするために私は何をすべきですか？

Answer 1

作業コードをチェックすると、系列値を格納するために別のカウント変数は必要ありません。その場合、previous1は常にその値を持ちます。系列値を更新する方法

：

'+' 時：各ステップprevious1になります(previous1 + previous2)とprevious2に等しいprevious1値をとります。 ' - ' の間に

：previous1はprevoious2になりますし、previous2がprevious1 - previous2

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     previous1: 1, 
 
     previous2: 0, 
 
    } 
 

 
    this.clickDecrease = this.clickDecrease.bind(this); 
 
    this.clickIncrease = this.clickIncrease.bind(this); 
 
    } 
 

 
    clickIncrease(e) { 
 
    let a = this.state.previous1 + this.state.previous2; 
 
    this.setState({ 
 
     previous1: a, 
 
     previous2: this.state.previous1, 
 
    }); 
 
    } 
 

 
    clickDecrease(e) { 
 
    this.setState({ 
 
     previous1: this.state.previous2, 
 
     previous2: this.state.previous1 - this.state.previous2, 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
      The current number is: {this.state.previous1} 
 
      <br/> 
 
      <button onClick={this.clickDecrease} className="btn btn-danger">-</button> 
 
      <button onClick={this.clickIncrease} className="btn btn-primary">+</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id ='app'/>

注の値を取ります：とき値を、減少関数の条件を入れて状態変数の値は1と0になります。それ以外の場合は負の値をとります。