無法使用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傳遞給它。 查看示例