TypeError: parentSubmit is not a function
TypeError: parentSubmit is not a function
嗨,我正在尝试将基于 redux-forms typescript class 的组件重构为 hooks。
这是组件的放置位置(最终也会更改为挂钩):
import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';
interface StreamCreate {
createStream: any;
}
class StreamCreate extends React.PureComponent<StreamCreate> {
onSubmit = (formValues: any) => {
this.props.createStream(formValues);
}
render() {
return (
<div>
<h3>Create a Stream</h3>
<StreamFormEx parentSubmit={this.onSubmit}/>
</div>
)
}
}
export default connect(null, { createStream })(StreamCreate);
这是我的基于 class 的表单组件,运行良好:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
parentSubmit: any;
}
class StreamForm extends React.PureComponent<InjectedFormProps<IUser> & IDispatchProps> {
onSubmitForm = (formValues: object) => {
const { parentSubmit } = this.props;
parentSubmit(formValues);
}
render() {
const { pristine, submitting, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmitForm)} className="ui__form">
<div>
<label>Enter Title </label>
<Field
id="title"
name="title"
component={Input}
type="text"
placeholder="Enter Title"
/>
</div>
<div>
<label>Description </label>
<Field
id="description"
name="description"
component={Input}
type="text"
placeholder="Description"
/>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
</div>
</form>
);
}
}
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
这就是我尝试实现挂钩的方式:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
parentSubmit: any;
}
export const onSubmitForm = (formValues: object, props: any) => {
const { parentSubmit } = props;
parentSubmit(formValues);
}
const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
<form onSubmit={props.handleSubmit(onSubmitForm)}>
<div className="LoginFormWrapper">
<div className="bodyWrapper">
<Field
id="title"
name="title"
placeholder="Enter title"
type="text"
component={Input}
/>
<Field
id="description"
name="description"
placeholder="Enter description"
type="text"
component={Input}
/>
<div className="buttonWrapper">
<Button
text="Submit"
onClick={() => props.handleSubmit(onSubmitForm)}
isDisabled={props.invalid}
/>
</div>
</div>
</div>
</form>
);
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
这是我得到的错误:
×
TypeError: parentSubmit is not a function
onSubmitForm
src/components/streams/StreamForm/StreamFrom.tsx:19
16 |
17 | export const onSubmitForm = (formValues: object, props: any) => {
18 | const { parentSubmit } = props;
> 19 | parentSubmit(formValues);
20 | }
21 |
22 | const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
有人可以向我解释为什么我的基于 class 的组件有效而我的 hooks 组件无效吗?
谢谢
我找到了解决方案:
组件的位置:
import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';
interface StreamCreate {
createStream: any;
}
class StreamCreate extends React.PureComponent<StreamCreate> {
useOnSubmit = (formValues: any) => {
this.props.createStream(formValues);
}
render() {
return (
<div>
<h3>Create a Stream</h3>
<StreamFormEx onSubmit={this.useOnSubmit}/>
</div>
)
}
}
export default connect(null, { createStream })(StreamCreate);
这是钩子:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field, formValues } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
onSubmit: object;
}
const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => {
const { handleSubmit } = props;
return (
<form onSubmit={handleSubmit}>
<div className="LoginFormWrapper">
<div className="bodyWrapper">
<Field
id="title"
name="title"
placeholder="Enter title"
type="text"
component={Input}
/>
<Field
id="description"
name="description"
placeholder="Enter description"
type="text"
component={Input}
/>
<div className="buttonWrapper">
<Button
text="Submit"
type="Submit"
isDisabled={props.invalid}
/>
</div>
</div>
</div>
</form>
)
}
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
我通过 redux-forms 文档找到了解决方案。
嗨,我正在尝试将基于 redux-forms typescript class 的组件重构为 hooks。
这是组件的放置位置(最终也会更改为挂钩):
import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';
interface StreamCreate {
createStream: any;
}
class StreamCreate extends React.PureComponent<StreamCreate> {
onSubmit = (formValues: any) => {
this.props.createStream(formValues);
}
render() {
return (
<div>
<h3>Create a Stream</h3>
<StreamFormEx parentSubmit={this.onSubmit}/>
</div>
)
}
}
export default connect(null, { createStream })(StreamCreate);
这是我的基于 class 的表单组件,运行良好:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
parentSubmit: any;
}
class StreamForm extends React.PureComponent<InjectedFormProps<IUser> & IDispatchProps> {
onSubmitForm = (formValues: object) => {
const { parentSubmit } = this.props;
parentSubmit(formValues);
}
render() {
const { pristine, submitting, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmitForm)} className="ui__form">
<div>
<label>Enter Title </label>
<Field
id="title"
name="title"
component={Input}
type="text"
placeholder="Enter Title"
/>
</div>
<div>
<label>Description </label>
<Field
id="description"
name="description"
component={Input}
type="text"
placeholder="Description"
/>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
</div>
</form>
);
}
}
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
这就是我尝试实现挂钩的方式:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
parentSubmit: any;
}
export const onSubmitForm = (formValues: object, props: any) => {
const { parentSubmit } = props;
parentSubmit(formValues);
}
const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
<form onSubmit={props.handleSubmit(onSubmitForm)}>
<div className="LoginFormWrapper">
<div className="bodyWrapper">
<Field
id="title"
name="title"
placeholder="Enter title"
type="text"
component={Input}
/>
<Field
id="description"
name="description"
placeholder="Enter description"
type="text"
component={Input}
/>
<div className="buttonWrapper">
<Button
text="Submit"
onClick={() => props.handleSubmit(onSubmitForm)}
isDisabled={props.invalid}
/>
</div>
</div>
</div>
</form>
);
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
这是我得到的错误:
×
TypeError: parentSubmit is not a function
onSubmitForm
src/components/streams/StreamForm/StreamFrom.tsx:19
16 |
17 | export const onSubmitForm = (formValues: object, props: any) => {
18 | const { parentSubmit } = props;
> 19 | parentSubmit(formValues);
20 | }
21 |
22 | const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => (
有人可以向我解释为什么我的基于 class 的组件有效而我的 hooks 组件无效吗?
谢谢
我找到了解决方案:
组件的位置:
import React from 'react';
import { connect } from 'react-redux';
import { createStream } from '../../actions';
import './formStyles.scss';
import{ StreamFormEx }from './StreamForm/StreamFrom';
interface StreamCreate {
createStream: any;
}
class StreamCreate extends React.PureComponent<StreamCreate> {
useOnSubmit = (formValues: any) => {
this.props.createStream(formValues);
}
render() {
return (
<div>
<h3>Create a Stream</h3>
<StreamFormEx onSubmit={this.useOnSubmit}/>
</div>
)
}
}
export default connect(null, { createStream })(StreamCreate);
这是钩子:StreamForm.tsx
import * as React from 'react';
import { Input } from "../StreamFormInput/StreamFormInput";
import { Button } from "../StreamFormButton/StreamFormButton"
import { Validation } from "./StreamFormValidation"
import { reduxForm, InjectedFormProps, Field, formValues } from 'redux-form';
import '../formStyles.scss';
export interface IUser {
title: string;
description: string;
}
export interface IDispatchProps {
onSubmit: object;
}
const StreamForm = (props:IDispatchProps & InjectedFormProps<IUser, IDispatchProps>) => {
const { handleSubmit } = props;
return (
<form onSubmit={handleSubmit}>
<div className="LoginFormWrapper">
<div className="bodyWrapper">
<Field
id="title"
name="title"
placeholder="Enter title"
type="text"
component={Input}
/>
<Field
id="description"
name="description"
placeholder="Enter description"
type="text"
component={Input}
/>
<div className="buttonWrapper">
<Button
text="Submit"
type="Submit"
isDisabled={props.invalid}
/>
</div>
</div>
</div>
</form>
)
}
export const StreamFormEx = reduxForm<IUser, IDispatchProps>({
form: 'streamForm',
validate: Validation,
})(StreamForm);
我通过 redux-forms 文档找到了解决方案。