TypeError: parentSubmit не является функцией - PullRequest
Новая
       17

TypeError: parentSubmit не является функцией

0 голосов
/ 24 апреля 2020

Привет, я пытаюсь реорганизовать компонент, основанный на классе машинописи в редукционной форме, в хуки.

это место, где должен сидеть компонент (в конечном итоге он также будет заменен на хуки) ): 

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);

Это мой компонент формы, основанный на классах, который прекрасно работает: 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>) => (

Может кто-нибудь объяснить мне, почему мой компонент на основе классов работает и мой компонент крючков не?

Спасибо

1 Ответ

0 голосов
/ 24 апреля 2020

Я нашел решение:

Где компонент должен сидеть: 

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);

Я нашел решение, просмотрев документы по редуксам.

...