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

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

新規登録して質問してみよう
ただいま回答率
85.35%
ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

0回答

1159閲覧

Formikで画像ファイルを入力した時にstateがリフレッシュされてしまう

Sean2014

総合スコア59

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/07/02 10:10

現在、React(TypeScript)でFormikのFormでユーザーインプットを処理するコンポーネントを作ろうとしています。Formの入力値のタイプはTextとFileです。

現時点で抱えている問題としては、特定の条件下で画像をアップしようとした時にFormの入力フィールドが(意図していないのに)リセットされてしまうという事です。

例えば、先に画像ファイルを選択してその後でテキストの欄を記入して送信ボタンを押せば全てのデータが正常にaxios.postで送信されてバックエンド側でも適切に処理されてデータが保存されるのですが、ユーザーインプットの順番を逆にして、先にテキストタイプの欄を入力してから画像を選択するとその時にフォームのテキストの入力欄がリセットされてしまうのです。さらには、ファイルの所の値も自身のローカルPCから選んだ画像ではなく"foo.txt"としてリセットされてしまいます。

下記が実際のコードです。

import React from 'react'; import Word from '../interfaces/Word.interface'; import WordsDataService from '../api/WordsDataService'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import IWordProps from '../interfaces/IWordProps.interface'; import IWordState from '../interfaces/IWordState.interface'; class CreateWord extends React.Component<IWordProps, IWordState>{ constructor(props: IWordProps){ super(props) this.state = { wordId: this.props.match.params.id, wordData: { id: 0, ownLangWordName: '', targetLangWordName: '', ownLangExSentence: '', targetLangExSentence: '', createdDate: new Date, image: new File(["foo"], "foo.txt") } } this.onSubmit = this.onSubmit.bind(this) this.onChange = this.onChange.bind(this) this.awaitSetState = this.awaitSetState.bind(this) } componentDidMount(){ // directly mutating the state. to be refined later this.state.wordData.id = null; } async awaitSetState(stateUpdate: Word){ await this.setState({wordData : stateUpdate}) } onChange(e: { currentTarget: HTMLInputElement; }){ const chosenFile = e.currentTarget.files[0]; console.log("The value of chosenFile:"); console.log(chosenFile); let tempWordData = this.state.wordData; tempWordData.image = chosenFile; this.awaitSetState(tempWordData); console.log("The value of this.state.wordData: "); console.log(this.state.wordData); } onSubmit(values: Word){ let word = values; WordsDataService.createWord(word) .then(() => this.props.history.push('/')) } render(){ let { id, ownLangWordName, targetLangWordName, ownLangExSentence, targetLangExSentence, createdDate, image} = this.state.wordData; return( <div> <h2>Create Word</h2> <div> <Formik initialValues={{ id, ownLangWordName, targetLangWordName, ownLangExSentence, targetLangExSentence, createdDate, image}} onSubmit={this.onSubmit} enableReinitialize={true} > { (props) => ( <Form> <fieldset> <label>Word (Target Language)</label>&nbsp; <Field type="text" name="targetLangWordName"/> </fieldset> <fieldset> <label>Word (Own Language)</label>&nbsp; <Field type="text" name="ownLangWordName"/> </fieldset> <fieldset> <label>Sentence (Target Language)</label>&nbsp; <Field type="text" size="75" name="targetLangExSentence"/> </fieldset> <fieldset> <label>Sentence (Own Language)</label>&nbsp; <Field type="text" size="75" name="ownLangExSentence"/> </fieldset> <fieldset> <label>Date</label>&nbsp; <Field type="text" name="createdDate"/> </fieldset> <fieldset> <label>Image</label>&nbsp; <input id="image" type="file" name="image" onChange={this.onChange}/> </fieldset> <button type="submit">Save</button> </Form> ) } </Formik> </div> </div> ) } } export default CreateWord;

空の文字列や"foo.txt"state.wordDataにデフォルト値として設定したものであるという所までは把握していますが、よくわからないのが「なぜファイルインプットを先に入力してテキストを後から入力したら何も問題が起こらないのに後でファイルを選択すると入力欄がリセットされてしまうのか?」という事です。

JavaScriptやTypeScriptにおいては非同期的な性質があるという事を意識する必要があるのはわかっていますが、下記のようなasync & awaitのメソッドも定義して使っているのにうまくいっていないのが現状です。

async awaitSetState(stateUpdate: Word){ await this.setState({wordData : stateUpdate}) }

console.logで各フェーズでの変数の値を見てもみましたが、

this.awaitSetState(tempWordData); console.log("The value of this.state.wordData: "); console.log(this.state.wordData); ...

の段階ではもうFormの各入力欄が空の文字列や"foo.txt"としてリセットされてしまっていました。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問