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

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

ただいまの
回答率

89.13%

Reactでのデータの受け渡し

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,899

seicma07

score 6

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

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

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

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')
  );

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

class Calendar5 extends React.Component {
  // Callback to stash calendar value
  handleCalendarUpdate = (selected) => {
    this.setState({ date: selected });
  } 

  renderCalendar() {
    return (
      <InfiniteCalendar
        onSelect={this.handleCalendarUpdate}
      />
    )
  }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/04 08:17

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

    キャンセル

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる