gpt4 book ai didi

javascript - Redux 表单 Prop 和 typescript

转载 作者:数据小太阳 更新时间:2023-10-29 04:35:58 27 4
gpt4 key购买 nike

多年来一直在寻找,但没有找到任何值得的东西。

当我使用 Flow 时,我可以简单地:

import { type FieldProps, FormProps } from 'redux-form';

是否有类似(并且简单)的方法可以在 typescript 中将 props 正确设置为 redux 形式?

文档没有提到任何关于 typescript 的内容,只有一个页面用于 Flow typings。

但是,我发现我可以从 redux-form 导入类似 propTypes 的东西:

import { reduxForm, propTypes } from 'redux-form'

然而 - redux-form 没有像 propTypes 导出的东西,所以文档有点被弃用了。

链接:https://redux-form.com/7.2.1/docs/api/props.md/

在此先感谢您提供的任何帮助。

tl;dr class RegistrationForm extends React.PureComponent<any> {
what to drop here ^^^^^

最佳答案

您需要安装 @types/redux-form与您的包管理器一起打包。 @types/redux-form包包括 redux-form 的类型定义包。

然后您可以从 redux-form 导入类型定义,例如 InjectedFormProps .

您的表单将用 reduxForm() 包装应该有扩展 InjectedFormProps<FormData = {}, P = {}> 的 Prop .

reduxForm()类型是通用的 reduxForm<FormData = {}, P = {}>(...

看例子:

import * as React from 'react';
import { reduxForm, InjectedFormProps, Field } from 'redux-form';

import { IUser } from './index';

interface IProps {
message: string;
}

class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> {
render() {
const { pristine, submitting, reset, handleSubmit, message } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>{message}</div>
<div>
<label>First Name </label>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
/>
</div>
<div>
<label>Last Name </label>
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
/>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
}
}

export default reduxForm<IUser, IProps>({
form: 'userForm',
})(UserForm);

Edit Redux Form + Typescript example

@types/redux-form的源代码包裹位于 here .您可以在 redux-form-tests.tsx 中查看类型和更复杂的示例用于类型检查的文件。

关于javascript - Redux 表单 Prop 和 typescript ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48379435/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com