我正在尝试将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;
知道我做错了什么吗？
1 回答
handleSubmit应该在你之外定义CreateCompany组件并通过道具传递给它 . 看看examples