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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

0回答

727閲覧

Reduxにて、フォームに入力した内容が登録されるようにしたい

yuki-o0413

総合スコア8

Redux

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2020/12/03 08:03

編集2022/01/12 10:55

フォームにて、入力した内容がlogで出力されるようにしたいが、
表示画面にて入力を行うとエラーが出てしまいます。
エラー内容

App.js:25 Uncaught TypeError: _actions__WEBPACK_IMPORTED_MODULE_1__.updateFormId is not a function at Object.updateFormId (App.js:25) at Object.onChangeId (App.js:21) at onChange (Content.js:36)   ・・・
Uncaught TypeError: this.props.updateFormName is not a function at Object.onChangeName (App.js:25) at onChange (Content.js:43)

・updateFormIdとupdateFormNameが関数ではないと言われていますが、具体的にどう直せば良いのか分からず、進めないでいます。

React、JavaScript学習初めて1ヶ月の初心者です。
サンプルコードを真似しつつコードを書いてます。
改善点、問題解決のためのアプローチの方法、アドバイスいただけたらありがたいです。お願いします。
また、他に必要な情報があればあ追記します。

Content.js

1'use strict'; 2import React,{ useState } from 'react'; 3import { createStore } from "redux"; 4 5export default function Content(props) { 6 const ids = props.formItem.id; 7 const names = props.formItem.name; 8 console.log(props.formItem.id["list"]) 9 // const ids = props.formItem.id; 10 console.log(ids) 11 return ( 12 <> 13 <p>content</p> 1415 <Form 16 onChangeId={props.onChangeId} 17 onChangeName={props.onChangeName} 18 /> 19 <button type="button" 20 className="btn btn-outline-success" 21 onClick={() => props.onSaveItem()} > 22 SAVE 23 </button> 24 </> 25 ); 26} 27 28function Form(props) { 29 return ( 30 <div className="form-group"> 31 <label className="pt-2">ID</label> 32 <input id="1" 33 type="text" 34 className="form-control" 35 value={props.id} 36 onChange={(e) => props.onChangeId(e)} 37 /> 38 <label className="pt-2">Name</label> 39 <input id="2" 40 type="text" 41 className="form-control" 42 value={props.name} 43 onChange={(e) => props.onChangeName(e)} 44 /> 45 </div> 46 ) 47}

App.js

1import React, { Component } from 'react'; 2 3import Header from './components/Header'; 4import Footer from './components/Footer'; 5import Top from './components/Top'; 6import Content from './components/Content'; 7 8 9class App extends Component { 10 constructor(props) { 11 super(props); 12 } 13 14 componentDidMount() { 15 const id = 1; 16 const name = "name1"; 17 this.props.didMnt(id,name); 18 } 19 // formId 20 onChangeId = (e) => { 21 this.props.updateFormId(e.target.id); 22 } 23 // forName 24 onChangeName = (e) => { 25 this.props.updateFormName(e.target.name); 26 } 27 // clickSaveButton 28 onSaveItem = () => { 29 console.log("SAVE_ID: ",this.props.conditions.id); 30 console.log("SAVE_NAME: ",this.props.conditions.name); 31 } 32 33 render() { 34 35 console.log(this.props); 36 const formItem = this.props 37 // formEvent 38 const contentHandler = ({onChangeId, onChangeName, onSaveItem}) => ({ onChangeId, onChangeName, onSaveItem }) 39 40 console.log('App.render:', this.props); 41 42 return ( 43 <div className="content"> 44 <Header /> 45 sample site 46 {/* <div className="row"> 47 48 <div className="col-5"> 49 <p>test</p> 50 </div> 51 </div> */} 52 <Top /> 53 <br /> 54 <br /> 55 <br /> 56 <div className="container"> 57 <Content formItem={formItem} {...contentHandler(this)} /> 58 </div> 59 <br /> 60 <br /> 61 <br /> 62 <Footer /> 63 </div> 64 ); 65 } 66} 67export default App;

containers/App.js

1import { connect } from 'react-redux'; 2import * as actions from '../actions'; 3import App from '../App'; 4 5const mapStateToProps = state => { 6 const {id,name} = state; 7 return {id,name} 8} 9 10const mapDispatchToProps = dispatch => { 11 return { 12 didMnt: (id,name) => dispatch(actions.didMnt(id,name)), 13 updateFormId: (id) => dispatch(actions.updateFormId(id)), 14 } 15} 16export default connect(mapStateToProps, mapDispatchToProps)(App)

createStore.js

1import { createStore as reduxCreateStore, combineReducers } from "redux"; 2 3export default function createStore() { 4 const store = reduxCreateStore( 5 combineReducers({ 6 id, 7 name 8 }) 9 ); 10 return store; 11}

actions.js

1export const didMnt = (id, name) => { 2 return { 3 type: 'DID_MOUNT', 4 payload: { id, name } 5 }; 6}

reducers.js

1 2const initialState = { 3 list: -1 4} 5export function id(state = initialState, action) { 6 const newState = JSON.parse(JSON.stringify(state)); 7 switch (action.type) { 8 case 'DID_MOUNT': 9 newState.list = action.payload.id; 10 break; 11 default: 12 return state; 13 } 14 return newState; 15}; 16export function name(state = initialState, action) { 17 const newState = JSON.parse(JSON.stringify(state)); 18 switch (action.type) { 19 case 'DID_MOUNT': 20 newState.list = action.payload.name; 21 break; 22 default: 23 return state; 24 } 25 return newState; 26}; 27 28

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問