1
Noob質問です。私はWizardForm
に2つの送信ボタンがあります。 3番目の手順でデータを送信し、4番目の手順で写真をアップロードします。写真のアップロードが成功した後、フォーム全体をどのようにレンダリングするのですか?私はフォームのクリーンな状態に戻ろうとしているので、ユーザーは通常のデータ入力フォームのようにデータを入力することができます。私は、次のエラーWizardForm__.a.forceUpdate is not a function
を与えるforceUpdate()を使ってWIzardフォームを再レンダリングするにはどうすればよいですか?
import React from 'react';
import {Field, reduxForm} from 'redux-form';
import validate from '../middleware/validate';
import { post } from 'axios';
import {BASE_URL} from '../middleware/api';
import {connect} from "react-redux";
import WizardForm from './WizardForm';
let WizardFormPhoto = (props) => {
const {handleSubmit, pristine, previousPage, submitting} = props;
const onFormSubmit = (data) => {
const {reset} = this.props;
let humanID = localStorage.getItem('humanID');
let token =localStorage.getItem('idToken');
const AuthStr = 'Bearer '.concat(token);
let formData = new FormData();
formData.append('humanId', humanID);
formData.append('photo', data.profile_pic[0]);
const config = {
headers: {'content-type': 'multipart/form-data', 'Authorization' : AuthStr}
};
const url = BASE_URL + 'human/upload';
post(url, formData, config)
.then(function (response) {
alert(response.data.message);
reset();
WizardForm.forceUpdate();
}).catch(function (error) {
console.log(error);
});
};
return (
<form onSubmit={handleSubmit(onFormSubmit)} className="form-horizontal">
<div className="step-3">
<div className="form-group">
<label className="col-sm-2 control-label">Add Photo</label>
<div className="col-sm-10">
<Field name="profile_pic" component="input" type="file"/>
</div>
</div>
<div className="clearfix">
<button type="submit" className="next pull-right btn btn-primary">Submit</button>
</div>
</div>
</form>
);
};
export default reduxForm({
form: 'wizard', // <------ same form name
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
validate,
})(WizardFormPhoto);
がforeceUpdate()
を呼び出す:
は、ここに私のコードです。どうすればそれを稼働させることができますか?
P.S:WizardForm
が重要です。 WizardForm
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from "react-redux";
import {reduxForm} from 'redux-form';
import WizardFormFirstPage from './WizardFormFirstPage';
import WizardFormSecondPage from './WizardFormSecondPage';
import WizardFormPreview from './WizardFormPreview';
import WizardFormPhoto from './WizardFormThirdPage'
import {
isSubmitting,
hasSubmitSucceeded,
hasSubmitFailed
} from 'redux-form'
class WizardForm extends Component {
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.backToOne = this.backToOne.bind(this);
this.state = {
page: 1,
};
}
nextPage() {
this.setState({page: this.state.page + 1});
}
previousPage() {
this.setState({page: this.state.page - 1});
}
backToOne() {
this.setState({page: 1,})
}
render() {
const {onSubmit} = this.props;
const {page, submitSucceeded} = this.state;
return (
<div>
{page === 1 && <WizardFormFirstPage onSubmit={this.nextPage}/>}
{page === 2 &&
<WizardFormSecondPage
previousPage={this.previousPage}
onSubmit={this.nextPage}
/>}
{page === 3 &&
<WizardFormPreview
previousPage={this.previousPage}
onSubmit={values => {
onSubmit(values,() => {
this.setState({
submitSucceeded: true
});
this.nextPage()
});
}}
/>}
{submitSucceeded && page === 4 &&
<WizardFormPhoto onSubmit={onSubmit}/>
}
</div>
);
}
}
WizardForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
};
WizardForm = reduxForm({
form: 'wizard',
initialValues: {
location: {
latitude: "0.0",
longitude: "0.0"
}
}
})(WizardForm)
WizardForm = connect(
state => ({
submitting: isSubmitting('wizard')(state),
submitSucceeded: hasSubmitSucceeded('wizard')(state),
submitFailed: hasSubmitFailed('wizard')(state)
})
)(WizardForm)
export default WizardForm;
WizardFormがどのように定義されていますか? React.Componentを拡張していますか? – Dez
はい。私はコードを追加しています。 –
クラスのインスタンスをインスタンスではなく静的であるかのように呼び出すようです。いずれにしても、Reactコンポーネントで 'forceUpdate'を呼び出す必要はないと思います。 Reduxストア内のデータを更新すると、コンポーネントが再描画されるはずです。なぜここでは起こっていないのかを確かめるために、 'redux-form'に慣れていません。 –