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

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

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

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

非同期処理

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

TypeScript

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

React.js

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

受付中

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

Sean2014
Sean2014

総合スコア0

ファイル

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

非同期処理

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

TypeScript

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

React.js

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

0回答

0評価

0クリップ

604閲覧

投稿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"としてリセットされてしまっていました。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

ファイル

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

非同期処理

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

TypeScript

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

React.js

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