反应最终形式不适用于打字稿

Question

我想在 react-typescript 环境中创建一个react final form。 我收到一个错误，提示我缺少“FormProps”所需的类型 {...} 中的“onSubmit”属性。我检查了界面，但不知道为什么会出现此错误，因为我已经设置并定义了该属性。

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
}

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