redux-form 字段参数为空

Question

我在使用 redux-form 时遇到一些问题，基本上 handleSubmit 传递给它接收的函数的参数是空的...

让我描述一下我的文件（为了清楚和简洁起见，我将使用要点）：

如果你能看到这一行：<form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>

还有这个超简单的函数：

onFormSubmit(fields) {
  console.log(fields);
};

字段为空，但 form reducer 处于活动状态，并且存在注册字段：

有什么想法吗？

Answer 1

您的 renderLoginField 函数呈现自定义字段组件（d'oh！）没有使用 input 属性。

这是为您的 renderLoginField 函数正确更改的代码：

const renderLoginField = ({icon, input, type, meta: { touched, error }}) => {
  let mailIcon = 'fa-envelope-o';
  let passIcon = 'fa-key';
  return (
    <div className='form-group input-group'>
      <span className='input-group-addon' id='email'>
        <i className={`fa ${icon === 'mail' ? mailIcon : passIcon}`} />
      </span>
      <input
        { ...input } // <-- missing in your code!!
        type={type}
        aria-describedby={type}
        name={input.name}
        placeholder={`Insert ${type}`}
        className='form-control'/>
    </div>
  );
};

如果您选中 the docs for <Field> component，您将看到以下声明，它描述了这样做的重要性：

Input Props

The props under the input key are what connects your input component to Redux and are meant to be destructured into your <input/> component

redux-form 字段参数为空

redux-form fields parameters are empty

javascript

reactjs

redux

redux-form

react-redux

Input Props