[英]How do I use types defined by @types/redux-form in React component with Field and FieldArray?
I'm developing app with React, Redux, Redux-Form and TypeScript.我正在使用 React、Redux、Redux-Form 和 TypeScript 开发应用程序。 I am struggling to use types defined by package @types/redux-form ( DefinitelyTyped ), especially with FieldArray.我正在努力使用包@types/redux-form( DefiniteTyped )定义的类型,尤其是使用FieldArray。 There is an attribute "component" where I pass reference to component, but I have no clue what type should I use when describing its props.有一个属性“组件”,我在其中传递对组件的引用,但我不知道在描述它的道具时应该使用什么类型。 I downloaded example of using FieldArray from Redux-Form repository and slightly modified it to work with TypeScript.我从Redux-Form 存储库下载了使用 FieldArray 的示例,并对其稍作修改以使用 TypeScript。 I want to compile it with compilerOption "noImplicitAny": true.我想用 compilerOption "noImplicitAny": true 编译它。 So here is the FieldArraysForm.tsx (similar to official example ):所以这里是 FieldArraysForm.tsx (类似于官方示例):
import * as React from 'react';
import { Field, FieldArray, reduxForm } from 'redux-form';
import validate from './validate';
const renderField = (props) => {
const { touched, error } = props.meta;
const { input, label, type } = props;
return (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
)
}
const renderHobbies = (props) => {
const { fields } = props;
const { error } = props.meta;
return (
<ul>
<li>
<button type="button" onClick={() => fields.push()}>
Add Hobby
</button>
</li>
{fields.map((hobby, index) => (
<li key={index}>
<button
type="button"
title="Remove Hobby"
onClick={() => fields.remove(index)}
/>
<Field
name={hobby}
type="text"
component={renderField}
label={`Hobby #${index + 1}`}
/>
</li>
))}
{error && <li className="error">{error}</li>}
</ul>
)
}
const renderMembers = (props) => {
const { fields } = props;
const { error, submitFailed } = props.meta;
return (
<ul>
<li>
<button type="button" onClick={() => fields.push({})}>
Add Member
</button>
{submitFailed && error && <span>{error}</span>}
</li>
{fields.map((member, index) => (
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
/>
<h4>Member #{index + 1}</h4>
<Field
name={`${member}.firstName`}
type="text"
component={renderField}
label="First Name"
/>
<Field
name={`${member}.lastName`}
type="text"
component={renderField}
label="Last Name"
/>
<FieldArray name={`${member}.hobbies`} component={renderHobbies} />
</li>
))}
</ul>
)
}
const FieldArraysForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<Field
name="clubName"
type="text"
component={renderField}
label="Club Name"
/>
<FieldArray name="members" component={renderMembers} />
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
export default reduxForm({
form: 'fieldArrays', // a unique identifier for this form
validate
})(FieldArraysForm)
How do I make it work with types?如何使它与类型一起使用?
I found the solution.我找到了解决方案。 I'm leaving the answer in case anyone had the same problem as me.如果有人和我有同样的问题,我会留下答案。
import * as React from 'react';
import { Field, FieldArray, reduxForm, WrappedFieldProps, WrappedFieldArrayProps, InjectedFormProps, GenericFieldArray } from 'redux-form';
import validate from './validate';
interface CustomFieldProps {
type?: string;
}
const FieldArrayCustom = FieldArray as new () => GenericFieldArray<Field, any>;
const renderField = (props: WrappedFieldProps & CustomFieldProps) => {
const { touched, error } = props.meta;
const { input, label, type } = props;
return (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
)
}
const renderHobbies = (props: WrappedFieldArrayProps<undefined>) => {
const { fields } = props;
const { error } = props.meta;
return (
<ul>
<li>
<button type="button" onClick={() => fields.push(undefined)}>
Add Hobby
</button>
</li>
{fields.map((hobby, index) => (
<li key={index}>
<button
type="button"
title="Remove Hobby"
onClick={() => fields.remove(index)}
/>
<Field
name={hobby}
type="text"
component={renderField}
label={`Hobby #${index + 1}`}
/>
</li>
))}
{error && <li className="error">{error}</li>}
</ul>
)
}
const renderMembers = (props: WrappedFieldArrayProps<{}>) => {
const { fields } = props;
const { error, submitFailed } = props.meta;
return (
<ul>
<li>
<button type="button" onClick={() => fields.push({})}>
Add Member
</button>
{submitFailed && error && <span>{error}</span>}
</li>
{fields.map((member, index) => (
<li key={index}>
<button
type="button"
title="Remove Member"
onClick={() => fields.remove(index)}
/>
<h4>Member #{index + 1}</h4>
<Field
name={`${member}.firstName`}
type="text"
component={renderField}
label="First Name"
/>
<Field
name={`${member}.lastName`}
type="text"
component={renderField}
label="Last Name"
/>
<FieldArrayCustom name={`${member}.hobbies`} component={renderHobbies} />
</li>
))}
</ul>
)
}
const FieldArraysForm = (props: InjectedFormProps) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<Field
name="clubName"
type="text"
component={renderField}
label="Club Name"
/>
<FieldArrayCustom name="members" component={renderMembers} />
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
export default reduxForm({
form: 'fieldArrays', // a unique identifier for this form
validate
})(FieldArraysForm)
We had the same issue with redux-form
8.2.6 and @types/redux-form
8.1.5.我们在redux-form
8.2.6 和@types/redux-form
8.1.5 中遇到了同样的问题。
But no longer a problem after upgrading to redux-form
8.3.8, @types/redux-form
8.3.5.但是升级到redux-form
8.3.8 后不再是问题, @types/redux-form
8.3.5。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.