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
参照している場所や、項目に関して間違えているところがあるかもしれません。
アドバイスをいただければと思います。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/03 23:17