与输入 redux-form 组件的斗争答案

【问题标题】：Struggle with typing redux-form component与输入 redux-form 组件的斗争
【发布时间】：2019-04-25 13:30:27
【问题描述】：

我正在尝试通过使用 redux-form 装饰组件 A 来导出我的组件 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);

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

【问题讨论】：

标签： reactjs typescript redux-form

【解决方案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 了解更多信息。

【讨论】：