无法使用 handleSubmit 捕获 Redux 形式的字段值

Question

我正在尝试将 Redux-form v6 集成到我的项目中，但是无论我如何尝试复制示例代码，我都无法获得有效的 redux-form。

一切似乎都已正确连接，但是 handleSubmit 函数没有从我的表单字段中捕获任何值。

我们将不胜感激有关此问题的任何指导。我的代码如下。

从减速器开始，这里似乎没有什么问题。

import { reducer as formReducer } from 'redux-form';

export default combineReducers({
  form: formReducer
});

然后，我使用容器组件将表单组件连接到 redux 表单，它将表单组件很好地装饰了所有 Redux-form 功能。

CreateCompany.js

import CreateCompany from '../components/create_company';
import { reduxForm } from 'redux-form';

export default reduxForm({
  form: 'company-submission'
})(CreateCompany);

实际的表格如下所示：

CreateCompany.jsx

<form onSubmit={ handleSubmit(values => {console.log("values",values)})}>

  <div>
    <label htmlFor="group">Group Name (Required)</label>
    <Field name="group" component={FormInput} type="text"/>
  </div>

  <div>
    <Field
      name="group-type"
      component={DropDownSelect}
      selectOptions={this.state.groupTypes}
      id="group-type"
    />
    <label>Group Type</label>
  </div>

  <button type="submit">Log In</button>

</form>

提供给 Field 组件的文本输入无状态函数。

FormInput.js （注意：我必须在输入标签中包含{...input.value} 才能在字段中输入。在示例代码中，仅使用了{...input}。）

import React from 'react';

const FormInput = ({ id, type, className, input }) => {
  className = className || "";
  id = id || "";
  return (
    <input id={id} {...input.value} type={type} className={className}/>
  )
}

export default FormInput;

DropDownSelect.js

import React from 'react';

const DropDownSelect = ({ input, selectOptions, id }) => {
  const renderSelectOptions = (selectOption) => (
    <option key={selectOption} value={selectOption}>{selectOption}</option>
  )
  return (
    <select id={id} {...input}>
      {selectOptions.map(renderSelectOptions)}
    </select>
  );
}

export default DropDownSelect;

知道我做错了什么吗？

Answer 1

handleSubmit 应该在 CreateCompany 组件之外定义并通过 props 传递给它。查看examples