0

だから私はcreate-react-appを使用して最初の React アプリを試しており、このGitHub プロジェクトに基づいてマルチステージ フォームを作成しようとしています。特に、AccountFieldsとRegistrationの部分です。

そのプロジェクトは、React のかなり古いバージョンで書かれているようです。そのため、更新を試みる必要がありました。

App.js:

import React, { Component } from 'react';
import './App.css';
import Activity from './Activity';

var stage1Values = {
    activity_name : "test"
};

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

        this.state = {
            step: 1
        };
    };

    render() {
        switch (this.state) {
            case 1:
                return <Activity fieldValues={stage1Values} />;
        }
    };

    saveStage1Values(activity_name) {
        stage1Values.activity_name = activity_name;
    };

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

export default App;

Activity.js:

import React, { Component } from 'react';

class Activity extends Component {
    render() {
        return (
            <div className="App">
                <div>
                    <label>Activity Name</label>
                    <input type="text" ref="activity_name" defaultValue={this.props.stage1Values} />
                    <button onClick={this.nextStep}>Save &amp; Continue</button>
                </div>
            </div>
        );
    };

    nextStep(event) {
        event.preventDefault();

        // Get values via this.refs
        this.props.saveStage1Values(this.refs.activity_name.getDOMNode().value);
        this.props.nextStep();
    }
}

export default Activity;

いくつかの例を見てきましたが、これは現在の状態を保存し (ユーザーがフォームのさまざまな部分間を行き来できるようにするため)、この段階の値を保存するための正しいアプローチのようです。ボタンをクリックするとSave & Continue、というエラーが表示されますCannot read property 'props' of null。明らかに、これは無効であることを意味thisしますが、修正方法がわかりません。

私はこれに間違った方法でアプローチしていますか? 私が見つけたすべての例は、まったく異なる実装をしているようです。私は Apache ベースのバックグラウンドを持っているので、一般的にこのアプローチは非常に珍しいと思います。

4

2 に答える 2

0

これをnextStep関数にバインドします。

<button onClick={this.nextStep.bind(this)}>Save &amp; Continue</button>

またはコンストラクターで：

constructor(props){
    super(props);
    this.nextSteps = this.nextSteps.bind(this);
}
于 2016-11-09T05:09:52.740 に答える
0

nextStep の this は Activity を指しておらず、このようにするだけです

<button onClick={()=>this.nextStep()}>Save &amp; Continue</button>
于 2016-11-09T02:22:45.547 に答える