質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

2回答

3386閲覧

redux-formでうまく値を更新できません。

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/10/11 13:16

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タグかなど)を試してみたがうまくいかなかった。

だいぶ格闘してみたのですが、情報が少なく行き詰まっています。
どなたかご存じの方がいらっしゃればご教示願えませんでしょうか。
よろしくお願いします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

何かのお役に立てればと思います。
こちらは正常に動きます
https://github.com/kenmori/OmajimeDesign

投稿2017/12/08 00:38

kkkke

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

どういうエラーが起きているのかとか、エラーが起きないにしろ、どういう期待をしているものに対して、どういった出力が出てしまっているのかが書かれてないとよくわかりませんが、

Object.assign({}, state, { customers: [action.customer] })

は怪しい気がします。。。
[action.customer] の配列部分まではコピーされてないですよね?
Object.assing()はシャローコピーなので。
その辺りでおかしな挙動になってたりしませんか?

コード少し見ただけなので、気になった点だけお伝えする感じですが。

投稿2017/10/12 02:44

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問