0
私は、ユーザーが自分の友達を招待できるようにするコンポーネントを構築しています。Redux動的にReduxフォームを作成する
コンポーネントの仕様は、友人の電子メールと企業のためのいくつかの入力フォームと、入力フォームを追加するボタンと、すべてのフォームを遠隔から提出するボタンを持つことです。フォームが送信されると、サーバーからの応答が受信されるまで、各フォームにスピンナが表示されます。その時点で、送信が成功し、フォームが消え、エラーがあった場合はエラーが表示されます。
私は次のことに固執しています：フォームをリモートでReduxフォームで送信するには、その名前を送信コンポーネントに渡す必要があります。私はプログラム的にフォームを作成したい。名前は自動インクリメントされた整数で、フォーム管理コンポーネントによって作成され、子フォームに小道具として渡されます。しかし、フォームをエクスポートしようとするとthis.props.nameという名前を参照すると、エラーが発生します。 'Uncaught TypeError：プロパティ' props 'undefined'を読み取ることができません - "this"は未定義です。
質問：
- が有効なこの問題を解決するための私のアプローチです、または私は基本的なレベルで異なる何かをする必要がありますか？
- どうすればこの問題を回避できますか？私はそれがスコープエラーだと思いますか？
マイ成分：
管理コンポーネント（作成し、フォームを削除し、それらを送信、等）：
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { submit } from 'redux-form'
import * as actions from '../../actions';
import InviteForm from './inviteForm';
class InvitationFormManager extends Component {
const buildForms = (length) =>{
for (let i = 0; i< length; i++)
{
this.setState({forms:[...this.state.forms, <InviteForm key={i} name={i}>]};
}
}
const addForm =() =>{
this.setState({forms:[...this.state.forms, <InviteForm key={(this.state.forms.length + 1)} name={(this.state.forms.length + 1)}>]});
}
const formSubmit = (form) =>
{
dispatch(submit(form.name))
.then(this.setState({
forms: this.state.forms.filter(f => f.name !== form.name)
}))
}
const submitForms =(){
for(let form of this.state.forms){formSubmit(form)}
}
constructor(props) {
super(props);
this.state = {forms:[]};
}
componentWillMount(){
buildForms(3)
}
render() {
return (<div>
<h5 className="display-6 text-center">Invite your team</h5>
{this.state.forms}
<br />
<button
type="button"
className="btn btn-primary"
onClick={submitForms}
>
Invite
</button>
<button
type="button"
className="btn btn-primary"
onClick={addForm}
>
+
</button>
</div>
);
}
}
export default connect(actions)(InvitationFormManager)
フォーム成分：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';
import { Link } from 'react-router';
const renderField = ({
input,
label,
type,
meta: { touched, error, warning }
}) => (
<fieldset className="form-group">
<label htmlFor={input.name}>{label}</label>
<input className="form-control" {...input} type={type} />
{touched && error && <span className="text-danger">{error}</span>}
</fieldset>
);
class InviteForm extends Component {
constructor(props) {
super(props);
this.name = this.name.bind(this);
}
handleFormSubmit(props) {
this.props.sendInvitation(props);
}
render() {
if (this.props.submitting) {
return (
<div className="dashboard loading">
<Spinner name="chasing-dots" />
</div>
);
}
const { formName, handleSubmit } = this.props;
return (
<div className="form-container text-center">
<form
className="form-inline"
onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<div className="form-group">
<Field
name="email"
component={renderField}
type="email"
label="Email"
/>
<Field
name="company"
component={renderField}
type="text"
label="Company"
/>
</div>
</form>
<div>
{this.props.errorMessage &&
this.props.errorMessage.invited && (
<div className="error-container">
Oops! {this.props.errorMessage.invited}
</div>
)}
</div>
</div>
);
}
}
function validate(values) {
let errors = {};
if (values.password !== values.password_confirmation) {
errors.password = "Password and password confirmation don't match!";
}
return errors;
}
function mapStateToProps(state) {
return {
errorMessage: state.invite.error,
submitting: state.invite.submitting
};
}
InviteForm = reduxForm({
form: this.props.name,
validate
})(InviteForm);
export default connect(mapStateToProps, actions)(InviteForm);