0
JSON
を渡して複数ページフォームを作成する従来のアプリケーションがあります。私はフォームを生成するためにjsonをちょうど通過できる共通の複数ページフォームコンポーネントを作成しようとしています。すべての状態値を子コンポーネントに渡す
アプリケーションのように親コンポーネントでstate
を設定buildFormState
を使用しています。
constructor(props) {
super(props);
this.state = this.buildFormState();
}
buildFormState() {
let state = SCREENS.reduce(function(o, s) {
let _s = s.fields.reduce(function(_o, _f) {
_o[_f.name] = _f.type == 'checkbox' ? [] : '';
return _o;
}, {});
return Object.assign(o, _s);
}, {});
state.current_screen = 0;
return state;
}
そして、これが私のMultiPageForm
コンポーネントに私の呼び出しです:MultiStepFormコンポーネントで
<MultiStepForm SCREENS = {SCREENS} current_screen = {this.state.current_screen} state = {this.state} submitState={this.submitState.bind(this)} uploadPhoto={this.uploadPhoto.bind(this)} completeForm={this.completeForm.bind(this)} />
そして、私のコンストラクタ:
constructor(props) {
super(props);
// this.state = this.props;
this.state = this.props.state;
this.SCREENS = this.props.SCREENS
}
しかし、いくつかのものは渡され、他のものは渡されないので、状態は正しく渡されません。子コンポーネントに個別に割り当てる必要なく、すべてを正しく渡す方法はありますか?