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> ) }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/19 15:12