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

我发现上面的代码有什么问题。问题是我作为lodash＆＃39; s handleSubmit向_noop提供的defaultProp。这会覆盖该函数并取消其默认操作。删除handleSubmit的defaultProp后，它会按预期工作。

但问题是，我之前使用_noop作为handleSubmit的defaultProp。那很好用。但突然之间，它无法正常工作。

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

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

PropTypes导致表单刷新onSubmit redux-form

1 个答案: