Question

我试图通过用redux-form装饰它来导出我的组件A，以便可以访问我的表单状态，该状态主要由另一个组件填充。

尝试导出组件时，出现此输入错误：

TS2322 Type A is not assignable to type B

(Property 'onAbortHandler' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}.......)

我还尝试连接组件，然后用reduxForm装饰连接的组件。那也行不通。

这是我的代码

interface OwnProps {
  onAbortHandler: () => void;
  onSubmitHandler: () => void;
}

class MyComponent extends React.Component
    <OwnProps & Partial<InjectedFormProps>>  {
  render() {
    return (
        <div>
          <Button
              className={'btn}
              onClick={this.props.onAbortHandler}
          >
            <FormattedMessage id={'xx'}/>
          </Button>
          <Button
              className={'btn'}
              type="submit"
              onClick={this.props.onSubmitHandler}
          >
            <FormattedMessage id={'xx'}/>
          </Button>
        </div>
    );
  }
}

export default reduxForm({
  form: 'myFormName',
})(MyComponent);

我的错误在哪里，为什么这似乎不是直截了当的？

Answer 1

这应该有效

interface OwnProps {
  onAbortHandler: () => void;
  onSubmitHandler: () => void;
}

class MyComponent extends React.Component
    <OwnProps & InjectedFormProps<{}, OwnProps>>  {
  render() {
    return (
        <div>
          <Button
              className={'btn}
              onClick={this.props.onAbortHandler}
          >
            <FormattedMessage id={'xx'}/>
          </Button>
          <Button
              className={'btn'}
              type="submit"
              onClick={this.props.onSubmitHandler}
          >
            <FormattedMessage id={'xx'}/>
          </Button>
        </div>
    );
  }
}

export default reduxForm<{}, OwnProps>({
  form: 'myFormName',
}

InjectedProps包含handleSubmit方法，该方法应了解您将传递给表单的道具。在此处查看library types，了解更多信息。

难以输入Redux形式的组件

1 个答案: