Окончательная форма React не работает с машинописным текстом

Я хочу создать окончательную форму реакции в среде react-typescript. Я получаю сообщение об ошибке, заключающееся в том, что мне не хватает свойства "onSubmit" в типе {...}, требуемом для "FormProps". Я проверил интерфейс, но не могу понять, почему я получаю эту ошибку, потому что это свойство установлено и определено.

myfile.tsx

import * as React from 'react';
import { Form, Field } from 'react-final-form';

export default class MyComponent extends React.Component {
  constructor(props: any) {
    super(props);

    this.onSubmitHandler = this.onSubmitHandler.bind(this);
    this.validateHandler= this.validateHandler.bind(this);
  }

   onSubmitHandler(): void {
   }

   validateHandler(): void {

   }

  render(): React.ReactNode {
    return (
      <div>
        <Form>
          onSubmit={this.onSubmitHandler} // OK
          validate={this.validateHandler}
          render={ ( {handleSubmit, pristine, invalid} ) => (
              <form onSubmit={handleSubmit}>


                <button type="submit" disabled={pristine || invalid}>
                  Submit
                </button>
              </form>
           )}
        </Form>
      </div>
    );
  }
}

index.d.ts (форма реакции) - FormProps => Config => ... onSubmit

export const Form: React.ComponentType<FormProps>;

export interface FormProps extends Config, RenderableProps<FormRenderProps>{
  subscription?: FormSubscription;
  decorators?: Decorator[];
  initialValuesEqual?: (a?: object, b?: object) => boolean;
}

export interface Config<FormData = object> {
  debug?: DebugFunction
  destroyOnUnregister?: boolean
  initialValues?: object
  keepDirtyOnReinitialize?: boolean
  mutators?: { [key: string]: Mutator }
  onSubmit: (
    values: FormData,
    form: FormApi,
    callback?: (errors?: object) => void
  ) => object | Promise<object | undefined> | undefined | void
  validate?: (values: object) => object | Promise<object>
  validateOnBlur?: boolean
}

введите здесь описание изображения


person que1326    schedule 13.03.2019    source источник


Ответы (1)


Внутри открывающего тега элемента должны быть указаны свойства. Измените на это свой метод render.

render(): React.ReactNode {
  return (
    <div>
      <Form 
        onSubmit={this.onSubmitHandler} // OK
        validate={this.validateHandler}
        render={ ( {handleSubmit, pristine, invalid} ) => (
          <form onSubmit={handleSubmit}>
            <button type="submit" disabled={pristine || invalid}>
              Submit
            </button>
          </form>
        )}>  
      </Form>
    </div>
  );
}
person Pavindu    schedule 13.03.2019
comment
Разве это не то же самое, что и он? - person Gary Carlyle Cook; 24.09.2019
comment
Если вы внимательно посмотрите на myfile.tsx в вопросе, вы увидите, что реквизиты были предоставлены не внутри тега <Form>, а сразу после него. - person Pavindu; 24.09.2019
comment
ах извините. пропустил :) - person Gary Carlyle Cook; 24.09.2019