1
私は単純なフォームを作成し、検証と処理の送信アクションを持つ再利用可能なコンポーネントを構築しようとしています。私はそれを自分で使うことができましたが、私が小道具を注入する機能的なコンポーネントを作ろうとすると、私はこのエラーに悩まされました。redux-formを機能コンポーネントと再利用しようとしています
このクラスには、これはフォーム
import React from 'react';
import { reduxForm, Field } from 'redux-form';
function CustomReduxForm(props) {
class CustomForm extends React.Component {
render() {
const { handleSubmit } = this.props;
return (
<div style={{ margin: '30px' }}>
<form onSubmit={handleSubmit(props.onSubmit)}>
{fields.map(myField => renderFieldset(myField))}
<button className="btn btn-primary" type="submit">Submit</button>
</form>
</div>
);
}
}
const renderInput = field => {
return (
<div className={`form-group ${field.meta.touched && field.meta.invalid ? 'has-danger' : ''}`}>
<input
{...field.input}
type={field.type}
className="form-control"
/>
{field.meta.touched && field.meta.error && <div className="text-help">{field.meta.error}</div>}
</div>
);
}
const renderFieldset = customField => {
return (
<div>
<label htmlFor={customField.name}>{customField.label}</label>
<Field
name={customField.name}
component={renderInput}
type={customField.type} />
</div>
);
}
const validate = values => {
const errors = {}
props.fields.forEach((customField) =>
{
if(customField.mandatory && ! values[customField.name]) {
errors[customField.name] = `You must enter a valid value for ${customField.label}!`;
}
});
return errors
}
return reduxForm({
form: props.formName,
validate
})(CustomForm);
};
export default CustomReduxForm;import React from 'react';
import CustomReduxForm from './CustomReduxForm';
class LoginForm extends React.Component {
getFields() {
return [
{
name : 'username',
type : 'text',
label : 'User',
mandatory : true
},
{
name : 'password',
type : 'password',
label : 'Password',
mandatory : true
}
];
}
handleFormSubmit(values) {
console.log(values)
}
render() {
return (
<div>
<div>Test</div>
<CustomReduxForm
formName="LoginForm"
fields={this.getFields()}
onSubmit={this.handleFormSubmit}
/>
</div>
);
}
}
export default LoginForm;を構築するコンポーネントを使用して
私はすでに、作成したフォームをCustomReduxFormにエクスポートする方法を試しましたが、それでも何もしませんでした。
return reduxForm({
form: props.formName,
validate
})(CustomForm);
// or
const FormWrapped = reduxForm({
form: props.formName,
validate
})(CustomForm);
// Non sense, but ..
return FormWrapped;
// or
return <FormWrapped />;ありがとう！
'
返事をいただきありがとうございます、今私はこれが動作するようになる、私はjpdelatorreのアドバイスに従った。欠けている部分がもっとあるように見えます。再度、感謝します！ –