質問編集履歴

1 初心者マークの追加

seicma07

seicma07 score 6

2017/04/17 16:49  投稿

Reactでのデータの受け渡し
ReactとPHP Laravel5を使用しています。
Reactの外部のカレンダーコンポーネント([react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar/blob/master/src/Calendar/withMultipleDates.js))を活用して、予約や空き時間の登録などの作業を行う部分を作っています。
現在、空き時間の登録を行う部分で、カレンダーの情報と時刻の情報をPHP側に送信するべく、まず、Reactでのフォーム送信で、取得した情報をコンソールで表示することを行っています。
handleSubmitで、時刻の部分は、フォームに入力するものなので、取得は可能ですが、カレンダーの情報は、stateやpropsなどを活用しても取得ができません。selectedやonselectなど参照する場所を変えてみたりしたのですが、コンソールの結果としては、Array[ ](空の配列)や、undefinedの結果が表示されます(複数日程取得できるため、配列で作っています)。
```Javascript
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import InfiniteCalendar, { Calendar, defaultMultipleDateInterpolation, withMultipleDates,} from 'react-infinite-calendar';
import format from 'date-fns/format';
import 'react-infinite-calendar/styles.css';
class Calendar5 extends React.Component{
constructor(props){
super(props);
this.state ={
dateArray:[],
datesArray:[],
selectValue1:'00',
selectValue2:'00',
selectValue3:'00',
selectValue4:'00'
};
this.DateArray = this.DateArray.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.onChangeSelectValue1 = this.onChangeSelectValue1.bind(this);
this.onChangeSelectValue2 = this.onChangeSelectValue2.bind(this);
this.onChangeSelectValue3 = this.onChangeSelectValue3.bind(this);
this.onChangeSelectValue4 = this.onChangeSelectValue4.bind(this);
}
static PropTypes(){
dateArray: PropTypes.array.isRequired
}
DateArray(date, selected, getInitialDate) {
let dateArray = this.props.selected.length? selected[0] : new Date();
this.setState({date: this.props.selected.date})
}
//時刻の項目
onChangeSelectValue1(e) {
this.setState({selectValue1: e.target.value});
}
onChangeSelectValue2(e) {
this.setState({selectValue2: e.target.value});
}
onChangeSelectValue3(e) {
this.setState({selectValue3: e.target.value});
}
onChangeSelectValue4(e) {
this.setState({selectValue4: e.target.value});
}
//情報の送信
handleSubmit(event, selected){
event.preventDefault();
let datesArray = this.state.dateArray.map(date=> format[date,'YYYY-MM-DD']);
console.log('submitting:', this.state.selectValue1 + ':' + this.state.selectValue2);
console.log('submitting:', this.state.selectValue3 + ':' + this.state.selectValue4);
console.log(datesArray);
}
//カレンダーの読み込み
renderCalendar(){
const today = new Date();
const lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
const threeMonth = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
const maxDates = new Date(today.getFullYear() + 1, today.getMonth(),today.getDate());
const locale = {
locale: require('date-fns/locale/ja'),
headerFormat: 'MMM Do, dddd',
weekdays: ['日', '月', '火', '水', '木', '金', '土'],
}
return(
<InfiniteCalendar
Component={withMultipleDates(Calendar)}
selected={[
]}
interpolateSelection={defaultMultipleDateInterpolation}
width={400}
height={400}
rowHeight={70}
locale={locale}
minDate={lastWeek}
maxDate={maxDates}
min={threeMonth}
max={maxDates}
onSelect={{}}
displayOptions={{
hideYearsOnSelect: false,
}}
/>
)}
render(){
//時刻の選択肢
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];
let time = ['00', 10, 20, 30, 40, 50];
var options1 = hours.map(function(hours) {
return <option value={hours} key={hours}>{hours}</option>;
});
var options2 = time.map(function(time) {
return <option value={time} key={time}>{time}</option>;
});
return(
<div>
<div>
{this.renderCalendar()}
</div>
<div>
<form onSubmit={this.handleSubmit}>
<div>開始時刻:
<select value={this.state.selectValue1} onChange={this.onChangeSelectValue1}>
{options1}
</select>
<span> : </span>
<select value={this.state.selectValue2} onChange={this.onChangeSelectValue2}>
{options2}
</select>
</div>
<div>終了時刻:
<select value={this.state.selectValue3} onChange={this.onChangeSelectValue3}>
{options1}
</select>
<span> : </span>
<select value={this.state.selectValue4} onChange={this.onChangeSelectValue4}>
{options2}
</select>
</div>
<button onClick={this.onClick}>登録</button>
</form>
</div>
</div>
)
}
}
ReactDOM.render(
<div>
<Calendar5 />
</div>,
document.getElementById('example1')
);
```
参照している場所や、項目に関して間違えているところがあるかもしれません。
アドバイスをいただければと思います。
よろしくお願いいたします。
  • JavaScript

    37485 questions

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

  • React.js

    3801 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る