が反応 - 構文 - ES6

Question

私はこのチュートリアルと一緒に従うことをしようとしていますに書き込む方法：https://www.viget.com/articles/building-a-multi-step-registration-form-with-react

このチュートリアルでは、ES6を使用していないので、私は立ち往生していますので、私は、違いを学ぶことをしようとしていますチュートリアル文書に問題がある場合は、これと同じ時間を計算してください。

このコードブロックでは構文エラーが発生します。それは、私が '、'を持っているはずの '、'を使ったと言います。それがES6に関係しているかどうかはわかりません。私はカンマを置き換えようとしましたが、同じエラーが発生します。

saveValues: function(field_value) { 
    return function() { 
     fieldValues = assign({}, fieldValues, field_value) 
    }.bind(this)() 
    }, 

これは間違っていますか？

完全なページは、現在のように設定されて

：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Link } from 'react-router-dom'; 

var AccountFields = require('./AccountFields'); 
var Confirmation = require('./Confirmation'); 
var Success   = require('./Success'); 
var SurveyFields = require('./SurveyFields'); 
var assign   = require('object-assign'); 


var fieldValues = { 
    name :null, 
    email :null, 
    password :null, 
    organisation :null, 
    interest :[] 
} 



// import { Button } from 'react-bootstrap'; 
// import * as ReactBootstrap from 'react-bootstrap' 

class Registration extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = function() { 
    return { 
     step: 1 
    } 
    }, 

    saveValues: function(field_value) { 
    return function() { 
     fieldValues = assign({}, fieldValues, field_value) 
    }.bind(this)() 
    }, 

    nextStep: function() { 
    this.setState({ 
     step : this.state.step + 1 
    }) 
    }, 

    previousStep: function() { 
    this.setState({ 
     step : this.state.step - 1 
    }) 
    }, 

    submitRegistration: function() { 
    switch (this.state.step) { 
     case 1: 
     return <AccountFields fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           previousStep={this.previousStep} 
           saveValues={this.saveValues} 
       /> 

     case 2: 
      return <SurveyFields fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           previousStep={this.previousStep} 
           saveValues={this.saveValues} 
        /> 

     case 3: 
      return <Confirmation fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           submitRegistration={this.submitRegistration} 
       /> 

     case 4: 
      return <Success fieldValues={fieldValues} /> 
    } 
    }, 

    render() { 
    return (
     <main> 
     <span className="progress-step"> Step {this.state.step}</span> 
     <progress className="progress"></progress> 
     {this.showStep()} 
     </main> 

    ) 
    } 

export.default = Registration; 

UPDATED ATTEMPT

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Link } from 'react-router-dom'; 

var AccountFields = require('./AccountFields'); 
var Confirmation = require('./Confirmation'); 
var Success   = require('./Success'); 
var SurveyFields = require('./SurveyFields'); 
var assign   = require('object-assign'); 


var fieldValues = { 
    name :null, 
    email :null, 
    password :null, 
    organisation :null, 
    interest :[] 
} 



// import { Button } from 'react-bootstrap'; 
// import * as ReactBootstrap from 'react-bootstrap' 

class Registration extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = function() { 
    return { 
     step: 1 
    } 
    } 

    saveValues(field_value) { 
    return function() { 
     fieldValues = assign({}, fieldValues, field_value) 
    }.bind(this)() 
    } 

    nextStep() { 
    this.setState({ 
     step : this.state.step + 1 
    }) 
    } 

    previousStep() { 
    this.setState({ 
     step : this.state.step - 1 
    }) 
    } 

    submitRegistration() { 
    switch (this.state.step) { 
     case 1: 
     return <AccountFields fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           previousStep={this.previousStep} 
           saveValues={this.saveValues} 
       /> 

     case 2: 
      return <SurveyFields fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           previousStep={this.previousStep} 
           saveValues={this.saveValues} 
        /> 

     case 3: 
      return <Confirmation fieldValues={fieldValues} 
           nextStep={this.nextStep} 
           submitRegistration={this.submitRegistration} 
       /> 

     case 4: 
      return <Success fieldValues={fieldValues} /> 
    } 
    } 

    render() { 
    return (
     <main> 
     <span className="progress-step"> Step {this.state.step}</span> 
     <progress className="progress"></progress> 
     {this.showStep()} 
     </main> 

    ) 
    } 


    } 
} 

export.default = Registration; 

Answer 1

カップルの事 - あなたのようなオブジェクトを構築ない、クラス内の関数や静的変数を定義しているがあなたは慣れています。

Javascriptクラスを見て、constructor()関数の詳細を学習します。最後にコンマは必要ありません。

constructor(props) { 
    super(props); 
    this.state = function() { 
    return { 
     step: 1 
    } 
    }, // <----------- 

そして、あなたはそれが

saveValues() { 
    ... 
} 

などだろうクラスの関数を定義するために、代わりにこの

saveValues: function 

のような関数の名前/値のペアを識別しません。

saveValues =() => { 
    ... 
} 

バインドthis

簡単な構文の問題をすばやく見つけるのに役立つIDEをお勧めします。 WebStormは時間を節約し、多くの問題はリンターによって発見され、迅速に公開されます。

Answer 2

ここで私が気づいたことがいくつかあります。まず、stateは関数として定義され、オブジェクトを返します。最初にそれをオブジェクトとして定義するだけではどうですか？状態が正常に定義されている方法についてのドキュメントについてはこちらを参照してください：https://reactjs.org/docs/state-and-lifecycle.html

また、あなたがthisインラインにあなたの機能を結合しています。必ずしもアンチパターンである必要はありませんが、コードを読むときに混乱が増えます。これらの関数をコンストラクタにバインドすることを検討することをお勧めします。また、状態自体の一部として容易に定義できるconstオブジェクトを定義しました。言うまでもなく、私が気づいたセミコロンやその他の構文関連の問題がたくさんあります。

は、ここで私は、この（ES6）をリファクタリングする方法をです：

import React from 'react'; 
import AccountFields from "./AccountFields"; 
import Confirmation from "./Confirmation"; 
import Success from "./Success"; 
import SurveyFields from "./SurveyFields"; 

export default class Registration extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     step: 1, 
     fieldValues: { 
     name: null, 
     email: null, 
     password: null, 
     organisation: null, 
     interest: [] 
     } 
    }; 

    this.saveValues = this.saveValues.bind(this); 
    this.nextStep = this.nextStep.bind(this); 
    this.previousStep = this.previousStep.bind(this); 
    } 

    saveValues(newFieldValue) { 
    this.setState({ 
     fieldValues: newFieldValue, 
    }); 
    } 

    nextStep() { 
    this.setState({ 
     step: this.state.step++ 
    }); 
    } 

    previousStep() { 
    this.setState({ 
     step: this.state.step -- 
    }); 
    } 

    submitRegistration() { 
    switch (this.state.step) { 
     case 1: 
     return (
      <AccountFields 
      fieldValues={this.state.fieldValues} 
      nextStep={this.nextStep} 
      previousStep={this.previousStep} 
      saveValues={this.saveValues} 
      />); 

     case 2: 
     return (
      <SurveyFields 
      fieldValues={this.state.fieldValues} 
      nextStep={this.nextStep} 
      previousStep={this.previousStep} 
      saveValues={this.saveValues} 
      />); 

     case 3: 
     return (
      <Confirmation 
      fieldValues={this.state.fieldValues} 
      nextStep={this.nextStep} 
      submitRegistration={this.submitRegistration} 
      />); 

     case 4: 
     return <Success fieldValues={this.state.fieldValues} />; 

     // You should probably add a default case here. 
    } 
    } 

    render() { 
    return (
     <main> 
     <span className="progress-step"> Step {this.state.step}</span> 
     <progress className="progress"/> 
     {/* Use the state, and not a non-existent function */} 
     `{this.state.step}/4` 
     </main> 

    ); 
    } 
} 

私は非常にあなたはあまりES5掘り下げるしようとする前に、チュートリアルに反応一読をお勧めします - > ES6はパース（それはセミのように見える場合でも、 -decentチュートリアル）。いくつかの大きな違いがありますが、このチュートリアルの基本的なロジックが多少不足しているように見えます。