react,reduxを使ってアプリ開発をしています。
この度、redux-formを使うことになったのですが、うまく値を更新することができません。
javascript
1 2import React from "react" 3import {connect} from "react-redux" 4import { Field, reduxForm, } from "redux-form" 5 6import {Page,Toolbar,Navigator,BackButton,List,ListItem,ListHeader,Icon} from "react-onsenui" 7import {Input,Button} from "react-materialize" 8 9import * as AppActions from "../Actions/alertAction" 10import {Input as Oinput} from "react-onsenui" 11 12import OpinionPostGoPage from "../Containers/Setting" 13 14function submitOpinionForm(values){ 15 console.log('to OpinionPostGoPage'); 16 this.props.navigator.pushPage({ 17 component: OpinionPostGoPage, 18 props:{...this.props}, 19 }) 20 21 console.log(this.props.customers[0].yourName); 22 console.log(this.props.customers[0].email); 23 console.log(this.props.customers[0].requirement); 24 console.log(this.props.customers[0].message); 25 26 27const NameField = () => ( 28 <Input className="input-fields" s={10} label="your name"/> 29) 30 31const EmailField = () => ( 32 <Input className="input-fields" s={10} label="Email (任意)" type="email"/> 33) 34 35const RequirementField = () => ( 36 <Input s={10} type='select' label="種類を選択してください" defaultValue='1'> 37 <option value="1">バグ・エラー</option> 38 <option value="2">要望・意見</option> 39 <option value="3">メンバー募集に関して</option> 40 <option value="4">その他</option> 41 </Input> 42) 43 44const MessageField = () => ( 45 <textarea cols="30" rows="50" placeholder="Message"></textarea> 46) 47 48class _OpinionForm extends React.Component { 49 50 render() { 51 const { 52 handleSubmit, 53 submitting 54 } = this.props 55 56 return( 57 <div> 58 <form onSubmit={handleSubmit}> 59 <Field 60 component={NameField} 61 name="yourName"/> 62 <Field 63 component={EmailField} 64 name="email"/> 65 <Field 66 component={RequirementField} 67 name="requirement"/> 68 <Field 69 component={MessageField} 70 name="message"/> 71 </form> 72 <Button 73 onClick={submitOpinionForm.bind(this)} 74 waves="light" 75 type="submit" 76 > 77 <Icon icon="fa-paper-plane"/> 78 submit 79 </Button> 80 </div> 81 ) 82 } 83} 84 85const OpinionForm = reduxForm({ 86 form: "customerForm", 87 onSubmit: submitOpinionForm, 88 // validate 89})(_OpinionForm) 90 91const mapStateToProps = (state) => { 92 return { 93 customers: state.customers.customers 94 } 95} 96 97const mapDispatchToProps = (dispatch) => { 98 return{ 99 onSubmit(values){ 100 dispatch(AppActions.addCustomer(values)) 101 } 102 } 103} 104 105export const CustomerFormContainer = connect( 106 mapStateToProps, 107 mapDispatchToProps 108)(OpinionForm)
reducerの一部です。
javascript
1import * as actionTypes from "../actionTypes" 2 3const initialState = { 4 customers: [ 5 { yourName: "test", email: "", requirement: "", message:""}, 6 ] 7} 8 9export const customersReducer = (state = initialState, action) => { 10 switch (action.type) { 11 case actionTypes.ADD_CUSTOMER: 12 return Object.assign({}, state, { 13 customers: [action.customer] 14 }) 15 default: 16 return state 17 } 18}
【実装したいこと】
submitボタンを押すと次のページに進み、そのときにconsoleに入力した値を表示したい。
【試したこと】
このページのコードを参考にして、コピペしてみたが、動かなかった
公式Documentのexampleを参考にしてみたが結局ちゃんと動かなかった
onSubmitやhandleSubmitの使い方や、使う場所(formタグかbuttonタグかなど)を試してみたがうまくいかなかった。
だいぶ格闘してみたのですが、情報が少なく行き詰まっています。
どなたかご存じの方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。