PropTypes 导致表单刷新 onSubmit redux-form

Question

PropTypes与组件一起使用时，表单提交导致页面刷新，redux-form的handleSubmit失效

例如：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

@reduxForm({ form: 'loginForm' })
export default class Login extends Component {

    static propTypes = {
        handleSubmit: PropTypes.func,
        requesting: PropTypes.bool,
        errMsg: PropTypes.string,
    };

    static defaultProps = {
        handleSubmit: _noop,
        requesting: false,
        errMsg: null,
    };

    render() {
        const { handleSubmit } = this.props;
        return(
            <form onSubmit={handleSubmit(this.onSubmit)}>
                <Field component={FormInput} name="username" />
                <Field component={FormInput} name="password" />
                <button type="submit">submit</button>
            </form>
        )
    }
    onSubmit = values => { console.log(values) }; // This is not working as expected and after submitting causes page reload with both username and password passed as queryString.
}

// or even like below, with proptypes declared outside.

MyForm.propTypes = {
    handleSubmit: PropTypes.func,
    requesting: PropTypes.bool,
    errMsg: PropTypes.string,
};

MyForm.defaultProp = {
    handleSubmit: _noop,
    requesting: false,
    errMsg: null,
};

但是当我删除 proptypes 代码时，它工作得很好。

环境详细信息：

redux-form: 7.3.0,
Browser: Chrome,
Node: v8.9.4

我怀疑错误可能在 webpack 配置中。但我不确切知道。我正在使用以下三个插件。

transform-class-properties
transform-object-rest-spread
transform-decorators-legacy

Answer 1

我发现上面的代码有什么问题。问题是我给 handleSubmit 作为 lodash 的 _noop 的 defaultProp。这会覆盖该函数并取消其默认操作。一旦我删除了 handleSubmit 的 defaultProp，它就会按预期工作。

但问题是，我之前使用 _noop 作为 handleSubmit 的 defaultProp。那工作正常。但是突然间它不起作用了。

即使我尝试将 null 设置为 handleSubmit 的 defaultProp，但它会抛出一个错误 handleSubmit is not a function。

最后，handleSubmit 是 redux-form 的一个 prop。所以我发现我们不应该为此设置 defaultProp。

PropTypes 导致表单刷新 onSubmit redux-form

PropTypes causing form to refresh onSubmit redux-form

reactjs

redux-form