私はRedux-form v6をプロジェクトに統合しようとしていますが、サンプルコードをどれほど厳密に再現しようとも、redux-formを取得できません。handleSubmitで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>
フィールドコンポーネントに供給されるテキスト入力ステートレス機能。
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;
私が間違っていることは何ですか?
handleSubmit関数は実行されますか? – lustoykov
はい、私はhandleSubmitに渡す関数によってそうするように指示されているので、空のオブジェクトをコンソールに記録します –