Question

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

所有内容似乎都已正确连接，但handleSubmit函数不会捕获表单字段中的任何值。

非常感谢有关此问题的任何指导。我的代码如下。

从减速机开始，似乎没有任何问题。

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

export default combineReducers({
  form: formReducer
});

然后，我使用容器组件将表单组件连接到redux表单，它使用所有Redux表单函数很好地装饰表单组件。

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

package.loadlib('hellobind.so', 'init')() greet()应在您handleSubmit组件之外定义，并通过道具传递给它。查看here

无法使用handleSubmit捕获Redux表单字段值

1 个答案: