Блог

Я хочу создать окончательную форму 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 (окончательная форма react) — 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
}
  

Реквизиты должны быть предоставлены внутри открывающего тега элемента.Измените свой 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>
  );
}