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

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

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

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

Q&A

解決済

1回答

236閲覧

redux component部分のコードの意味について

kazoogon

総合スコア281

Redux

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

0グッド

0クリップ

投稿2017/07/17 14:01

reduxについて勉強中。
ユーザーのcsvファイルをアップロードする機能のページのコードを解読しています、
しかし解読不明なところがあるので助けていただきたいです。
詳細はコード内に記入いたしました。(import文は省略いたしました)
よろしくお願いいたします。

export default class UsersCSVUploadForm extends React.Component { constructor (props) { super(props) this.files = null } uplaod = (file) => { this.files = file.target.files //イベントが発生した要素(class名などを取得←なんのため??) } submit = () => { this.props.onSubmit(this.files) //上のthis.filesで取得した要素でどの要素がsubmitされたか判断?? } showErrorDetail = (errors) => { let str = '' //letは再宣言できないvarみたいなもの,しかしこうする意味は?? errors.map((error, i) => { //エラーの数だけerrorsというオブジェクト配列に入れる str += error }) return str } render () { const {fetching, csvUploadErrors} = this.props //containerでdispatchしたfetchingとcsvUp;oadErrorsを使えるようにするためですね?? return ( <Form onSubmit={this.submit} > {({submitForm}) => ( <form onSubmit={submitForm} className={fetching ? 'fetching' : ''}> //この?の意味は?? <FormRow> <CSVFileUploader onChange={this.uplaod} field='csv_file' title={ I18n.t('csv_upload.input_title') } //this.uploadはどの要素でイベントが発生されたか取得しているものだが、、、それを使ってここで何をしているのか?? isRequired={true} /> //isrequiredはどこからとってきた?? </FormRow> <FormRow> <SubmitButton title={I18n.t('submit')} /> </FormRow> <FormRow> {csvUploadErrors.length > 0 ? <div><b>{I18n.t('csv_upload.error_messages_header')}</b></div> : ''} //'csv_upload.error_messages_header'←どこからとってきているのか?? {csvUploadErrors.map((error, i) => { //errorの数だけの情報が入ったcsvUploadErrorsというオブジェクト配列を作成 return ( <div>{I18n.t('csv_upload.error_title', {index: error.index})} {this.showErrorDetail(error.errors)}</div>) //{index: error.index}は一体何をしているのか。。。? })} </FormRow> </form> )} </Form> ) }

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

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

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

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

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

guest

回答1

0

ベストアンサー

this.files = file.target.files //イベントが発生した要素(class名などを取得←なんのため??)

ここって、フォームのファイル選択で選択されたファイルのデータリストが入ってるのでは?
event.target.filesでググってみて下さい。

submit = () => {
this.props.onSubmit(this.files) //上のthis.filesで取得した要素でどの要素がsubmitされたか判断??

ここは単純にフォームで選択されたファイルを送信してるだけだと思います。

showErrorDetail = (errors) => {
let str = '' //letは再宣言できないvarみたいなもの,しかしこうする意味は??

この下の行でstrにerrorに入ってる文字列か何かをつながてますよね。その為に事前に空文字で初期化してるだけだと思います。

const {fetching, csvUploadErrors} = this.props //containerでdispatchしたfetchingとcsvUp;oadErrorsを使えるようにするためですね??

掲載されてるコードを見る限りでは、単純にこれら2つのメソッドが親コンポーネントからpropsで渡されてるのではないでしょうか?

{submitForm} className={fetching ? 'fetching' : ''}> //この?の意味は??

三項演算子。。。

質問多いので、とりあえずここまで。。。

投稿2017/07/19 11:45

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kazoogon

2017/07/19 15:12

回答ありがとうございます。 なんか急に「こんな単純なことしかしてないのか?」っていう感覚になってきてます、おかげさまです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問