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

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

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

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

React.js

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

Q&A

1回答

3646閲覧

Reactでのデータの受け渡し

seicma07

総合スコア6

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2017/04/17 06:01

編集2022/01/12 10:55

ReactとPHP Laravel5を使用しています。
Reactの外部のカレンダーコンポーネント(react-infinite-calendar)を活用して、予約や空き時間の登録などの作業を行う部分を作っています。

現在、空き時間の登録を行う部分で、カレンダーの情報と時刻の情報をPHP側に送信するべく、まず、Reactでのフォーム送信で、取得した情報をコンソールで表示することを行っています。

handleSubmitで、時刻の部分は、フォームに入力するものなので、取得は可能ですが、カレンダーの情報は、stateやpropsなどを活用しても取得ができません。selectedやonselectなど参照する場所を変えてみたりしたのですが、コンソールの結果としては、Array[ ](空の配列)や、undefinedの結果が表示されます(複数日程取得できるため、配列で作っています)。

Javascript

1import React, {Component, PropTypes} from 'react'; 2import ReactDOM from 'react-dom'; 3import InfiniteCalendar, { Calendar, defaultMultipleDateInterpolation, withMultipleDates,} from 'react-infinite-calendar'; 4import format from 'date-fns/format'; 5import 'react-infinite-calendar/styles.css'; 6 7class Calendar5 extends React.Component{ 8 constructor(props){ 9 super(props); 10 this.state ={ 11 dateArray:[], 12 datesArray:[], 13 selectValue1:'00', 14 selectValue2:'00', 15 selectValue3:'00', 16 selectValue4:'00' 17 }; 18 this.DateArray = this.DateArray.bind(this); 19 this.handleSubmit = this.handleSubmit.bind(this); 20 this.onChangeSelectValue1 = this.onChangeSelectValue1.bind(this); 21 this.onChangeSelectValue2 = this.onChangeSelectValue2.bind(this); 22 this.onChangeSelectValue3 = this.onChangeSelectValue3.bind(this); 23 this.onChangeSelectValue4 = this.onChangeSelectValue4.bind(this); 24 } 25 26 static PropTypes(){ 27 28 dateArray: PropTypes.array.isRequired 29 } 30 31 DateArray(date, selected, getInitialDate) { 32 let dateArray = this.props.selected.length? selected[0] : new Date(); 33 this.setState({date: this.props.selected.date}) 34 35 } 36 37//時刻の項目 38 onChangeSelectValue1(e) { 39 this.setState({selectValue1: e.target.value}); 40 } 41 onChangeSelectValue2(e) { 42 this.setState({selectValue2: e.target.value}); 43 } 44 onChangeSelectValue3(e) { 45 this.setState({selectValue3: e.target.value}); 46 } 47 onChangeSelectValue4(e) { 48 this.setState({selectValue4: e.target.value}); 49 } 50 51 //情報の送信 52 handleSubmit(event, selected){ 53 event.preventDefault(); 54 55 let datesArray = this.state.dateArray.map(date=> format[date,'YYYY-MM-DD']); 56 57 console.log('submitting:', this.state.selectValue1 + ':' + this.state.selectValue2); 58 console.log('submitting:', this.state.selectValue3 + ':' + this.state.selectValue4); 59 console.log(datesArray); 60 61 62 } 63 64//カレンダーの読み込み 65 renderCalendar(){ 66 const today = new Date(); 67 const lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7); 68 const threeMonth = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate()); 69 const maxDates = new Date(today.getFullYear() + 1, today.getMonth(),today.getDate()); 70 71 const locale = { 72 locale: require('date-fns/locale/ja'), 73 headerFormat: 'MMM Do, dddd', 74 weekdays: ['日', '月', '火', '水', '木', '金', '土'], 75 } 76 77 return( 78 <InfiniteCalendar 79 Component={withMultipleDates(Calendar)} 80 selected={[ 81 82 ]} 83 interpolateSelection={defaultMultipleDateInterpolation} 84 width={400} 85 height={400} 86 rowHeight={70} 87 locale={locale} 88 minDate={lastWeek} 89 maxDate={maxDates} 90 min={threeMonth} 91 max={maxDates} 92 93 onSelect={{}} 94 95 displayOptions={{ 96 hideYearsOnSelect: false, 97 }} 98 /> 99 )} 100 101 render(){ 102//時刻の選択肢 103 let hours = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]; 104 let time = ['00', 10, 20, 30, 40, 50]; 105 106 var options1 = hours.map(function(hours) { 107 return <option value={hours} key={hours}>{hours}</option>; 108 }); 109 var options2 = time.map(function(time) { 110 return <option value={time} key={time}>{time}</option>; 111 }); 112 113 return( 114 <div> 115 <div> 116 {this.renderCalendar()} 117 </div> 118 <div> 119 <form onSubmit={this.handleSubmit}> 120 <div>開始時刻: 121 122 <select value={this.state.selectValue1} onChange={this.onChangeSelectValue1}> 123 {options1} 124 </select> 125 <span> : </span> 126 <select value={this.state.selectValue2} onChange={this.onChangeSelectValue2}> 127 {options2} 128 </select> 129 </div> 130 <div>終了時刻: 131 132 <select value={this.state.selectValue3} onChange={this.onChangeSelectValue3}> 133 {options1} 134 </select> 135 <span> : </span> 136 <select value={this.state.selectValue4} onChange={this.onChangeSelectValue4}> 137 {options2} 138 </select> 139 </div> 140 <button onClick={this.onClick}>登録</button> 141 </form> 142 </div> 143 </div> 144 ) 145 } 146 147 148} 149 150 151 152ReactDOM.render( 153 <div> 154 <Calendar5 /> 155 </div>, 156 document.getElementById('example1') 157 ); 158 159 160

参照している場所や、項目に関して間違えているところがあるかもしれません。
アドバイスをいただければと思います。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

おそらくカレンダー・コンポーネントのonSelectコールバックで戻り値を受け取ってそれをstateなどに記憶しておく必要があると思います。

このライブラリを使ったことがないので確証はありませんが、以下のように書くと値が取れるのではないでしょうか。

js

1class Calendar5 extends React.Component { 2 // Callback to stash calendar value 3 handleCalendarUpdate = (selected) => { 4 this.setState({ date: selected }); 5 } 6 7 renderCalendar() { 8 return ( 9 <InfiniteCalendar 10 onSelect={this.handleCalendarUpdate} 11 /> 12 ) 13 } 14} 15 16

投稿2017/05/03 17:40

shuntksh

総合スコア196

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

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

seicma07

2017/05/03 23:17

ありがとうございます。一度、試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問