編集履歴

質問編集履歴

タイトルの変更、　本文の一部削除

2018/05/23 12:41

投稿

スコア11

test CHANGED Viewed

	@@ -1 +1 @@
1	- redux-form ~~Fieldに入力した内容を~~contain~~erへ渡~~す方法
1	+ redux-form actionの初期値を表示する

test CHANGED Viewed

@@ -22,27 +22,27 @@
 ```ここに言語を入力
-export function activeRecipe(recipe){
+export function handleChange(text){
     return{
-        type: 'RECIPE_SELECTED',
+        type: 'TEXT_CHANGED',
-        payload: recipe
+        text: text
-    };
-}
+    }
+}
-export function handleChange(text){
+export function addRecipe(newrecipe){
     return{
-        type: 'TEXT_CHANGED',
+        type: 'RECIPE_ADDED',
-        text: text
+        payload: newrecipe
     }
@@ -50,374 +50,330 @@
+```
+AddRecipes.js/reducers
+```ここに言語を入力
+const AddRecipes = (state = initialState, action ) => {
-export function addRecipe(newrecipe){
+    switch(action.type) {
-    return{
-        type: 'RECIPE_ADDED',
+         case 'RECIPE_ADDED':
+               return {...state, recipes: action.payload}};
-        payload: newrecipe
+         return state
     }
-}
-```
-AddRecipes.js/reducers
-```ここに言語を入力
-const AddRecipes = (state = initialState, action ) => {
-    switch(action.type) {
-         case 'RECIPE_ADDED':
-               return {...state, recipes: action.payload}};
-         return state
+const initialState = {
+    recipes:[
+        {title: '白米', image: '5c0cdd2fa192df5c7a968734d0c49d7a_s.png', author: 'Aさん', ing:'お米', amount:'1合', howto:'お米を水で研ぐ。'}
+};
+export default AddRecipes;
+```
+index.js/actions
+```ここに言語を入力
+import {combineReducers} from 'redux';
+import AddRecipes from './AddRecipes';
+import {reducer as formReducer} from 'redux-form';
+const rootReducer = combineReducers({
+    form: formReducer,
+    recipes :AddRecipes
+    });
+export default rootReducer;
+```
+Form.js/containers
+```ここに言語を入力
+import React, {Component} from 'react';
+import {Field, reduxForm} from 'redux-form';
+import { bindActionCreators } from 'redux';
+import {handleSubmit} from '../actions/index';
+import {addRecipe} from '../actions/index';
+const Form = props => {
+    const {handleSubmit, pristine, submitting} = props;
+    return(
+        <form onSubmit = {handleSubmit}>
+        <div>
+            <h3>新規レシピ</h3>
+            <p>タイトル</p>
+            <Field
+                name = 'newtitle'
+                label = 'newtitle'
+                component="input"
+            />
+            <p>写真URL</p>
+            <Field
+                name = 'newimg'
+                label = 'newimg'
+                component="input"
+            />
+            <p>材料</p>
+            <Field
+                name = 'newing'
+                label = 'newing'
+                component="input"
+            />
+            <p>分量</p>
+            <Field
+                name = 'newamount'
+                label = 'newamount'
+                component="input"
+            />
+           <p>作り方</p>
+            <Field
+                name = 'newstep'
+                label = 'newstep'
+                component="input"
+            />
+            <p>コツ・コメント</p>
+            <Field
+                name = 'newcomment'
+                label = 'newcomment'
+                component="input"
+        　　/>
+        </div>
+        <div>
+            <button type = "submit" disabled = {pristine || submitting}>
+            送信
+            </button>
+        </div>
+        </form>
+    )
+}
+export default reduxForm({
+    form: 'addedrecipe',
+    fields: ['newtitle', 'newimg', 'newing','newamount','newstep', 'newcomment']
+  })(Form);
+```
+RecipeList.js/containers
+```ここに言語を入力
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {addRecipe} from '../actions/index';
+import {handleSubmit} from '../actions/index';
+import {bindActionCreators} from 'redux';
+class RecipeList extends Component{
+  renderList(){
+   let handleSubmit = (values) => {
+      var data = {
+          newtitle:values.newtitle,
+          newimg: values.newimg,
+          newing: values.newing,
+          newamount: values.newamount,
+          newstep: values.newstep,
+          newcomment: values.newcomment
+      }
+      this.props.addRecipe(data)
+  }
+    return this.props.recipes.map((recipe)=>{
+      return(
+        <div onClick = {()=> this.props.activeRecipe(recipe)}>
+        <p>{recipe.title}</p>
+        </div>
+      );
+    });
+  }
+  render(){
+    return <ul>{this.renderList()}</ul>
     }
-const initialState = {
-    recipes:[
-        {title: '白米', image: '5c0cdd2fa192df5c7a968734d0c49d7a_s.png', author: 'Aさん', ing:'お米', amount:'1合', howto:'お米を水で研ぐ。, 目盛りに合わせて水を入れて炊飯器にセットする。', comment: 'お米は研ぎすぎない方がおいしくなります。'},
-        {title: '卵焼き', image: 'tamagoyaki.png', author: 'Bさん', ing:'卵,サラダ油,めんつゆ',amount:'2個,小さじ1,小さじ2', howto:'卵をかき混ぜる。, めんつゆを入れて味をつける。, サラダ油をフライパンに入れて中火で熱する。,フライパンが温まったら卵液を注いで巻いていく', comment: '表面が半熟の間に巻き始めて予熱で火を通したほうがしっとりとした卵焼きになります。'},
-        {title: '味噌汁', image: 'maxresdefault.png', author: 'Cさん', ing:'味噌, 水, 類粒だし, わかめ, 豆腐',amount:'大さじ2,500ml,小さじ2,小さじ2,1/2丁', howto:'水を沸騰させる, 豆腐をわかめを入れて少し煮立たせる。, 火を止めて類粒だしと味噌を入れ混ぜる。', comment: '味噌を入れた後は煮立たせないようにしましょう。'}
-    ]
-};
-export default AddRecipes;
-```
-index.js/actions
-```ここに言語を入力
-import {combineReducers} from 'redux';
-import AddRecipes from './AddRecipes';
-import ActiveRecipe from './ActiveRecipe';
-import {reducer as formReducer} from 'redux-form';
-const rootReducer = combineReducers({
-    activeRecipe : ActiveRecipe,
-    form: formReducer,
-    recipes :AddRecipes
-    });
-export default rootReducer;
-```
-Form.js/containers
+}
+function mapStateToProps(state){
+  return {
+    recipes: state.recipes
+  }
+}
+export default connect (mapStateToProps, mapDispatchToProps)(RecipeList);
+```
+App.js/components
 ```ここに言語を入力
 import React, {Component} from 'react';
-import {Field, reduxForm} from 'redux-form';
+import RecipeList from '../containers/RecipeList'
-import { bindActionCreators } from 'redux';
-import {handleSubmit} from '../actions/index';
+import Form from '../containers/Form'
-import {addRecipe} from '../actions/index';
+import { addRecipe } from '../actions';
-const Form = props => {
-    const {handleSubmit, pristine, submitting} = props;
-    return(
-        <form onSubmit = {handleSubmit}>
-        <div>
-            <h3>新規レシピ</h3>
-            <p>タイトル</p>
-            <Field
-                name = 'newtitle'
-                label = 'newtitle'
-                component="input"
-            />
-            <p>写真URL</p>
-            <Field
-                name = 'newimg'
-                label = 'newimg'
-                component="input"
-            />
-            <p>材料</p>
-            <Field
-                name = 'newing'
-                label = 'newing'
-                component="input"
-            />
-            <p>分量</p>
-            <Field
-                name = 'newamount'
-                label = 'newamount'
-                component="input"
-            />
-           <p>作り方</p>
-            <Field
-                name = 'newstep'
-                label = 'newstep'
-                component="input"
-            />
-            <p>コツ・コメント</p>
-            <Field
-                name = 'newcomment'
-                label = 'newcomment'
-                component="input"
-        　　/>
-        </div>
-        <div>
-            <button type = "submit" disabled = {pristine || submitting}>
-            送信
-            </button>
-        </div>
-        </form>
-    )
-}
-export default reduxForm({
-    form: 'addedrecipe',
-    fields: ['newtitle', 'newimg', 'newing','newamount','newstep', 'newcomment']
-  })(Form);
-```
-RecipeList.js/containers
-```ここに言語を入力
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {activeRecipe} from '../actions/index';
-import {addRecipe} from '../actions/index';
-import {handleSubmit} from '../actions/index';
-import {bindActionCreators} from 'redux';
-class RecipeList extends Component{
+export default class App extends Component{
-  renderList(){
-   let handleSubmit = (values) => {
-      var data = {
-          newtitle:values.newtitle,
-          newimg: values.newimg,
-          newing: values.newing,
-          newamount: values.newamount,
-          newstep: values.newstep,
-          newcomment: values.newcomment
-      }
-      this.props.addRecipe(data)
-  }
-    return this.props.recipes.map((recipe)=>{
-      return(
-        <div onClick = {()=> this.props.activeRecipe(recipe)}>
-        <p>{recipe.title}</p>
-        <p>by {recipe.author}</p>
-        <p>材料 {recipe.ing.split(',').slice(0, 3).join('、 ')}</p>
-        <img src={require(`../pictures/${recipe.image}`)}  style={{ width: 80, height: 60 }}/>
-        </div>
-      );
-    });
-  }
   render(){
-    return <ul>{this.renderList()}</ul>
-    }
-}
-function mapStateToProps(state){
-  return {
-    recipes: state.recipes
-  }
-}
-function mapDispatchToProps(dispatch){
-  return bindActionCreators({activeRecipe: activeRecipe}, dispatch)
-}
-export default connect (mapStateToProps, mapDispatchToProps)(RecipeList);
-```
-App.js/components
-```ここに言語を入力
-import React, {Component} from 'react';
-import RecipeList from '../containers/RecipeList'
-import RecipeDetail from '../containers/RecipeDetail'
-import Form from '../containers/Form'
-import { addRecipe } from '../actions';
-export default class App extends Component{
-  render(){
     return (
       <div>
@@ -426,8 +382,6 @@
         <RecipeList />
-        <RecipeDetail />
       </div>
     );
@@ -458,9 +412,7 @@
-まずはinitialStateを渡してRecipeListに反映させていです。
+まずはinitialStateを渡してRecipeListに反映させたいです。
-また可能であれば、その後Formに内容を入力して送信した時のonSubmitのイベント部分のコードも一緒に確認して頂きたいです。