React - Redux、this.props.newCampaignInformationは定義されていませんが、私はコンソールにonStartChange関数をログオンしようとしました。

Question

React - redux、this.props.newCampaignInformationは未定義ですが、私はonStartChange関数でコンソールログを試みました。私はストアからデータを得ることができるはずです、あなたは私にこれを明確にしてください、助けていただければ幸いです。

私はコードを減らすためのいくつかの方法を省略しました。ありがとうございます

 @connect((store) => { 
     return { 
      newCampaignInformation: store.DealReducer.newCampaignInformation 
     };}) 





     const CalendarPicker = React.createClass({ 
    /** 
     * Function called to get the initial state of the class 
     * 
     * @param void: 
     * @return {{startValue: null, endValue: null, startOpen: boolean, endOpen: boolean}} the initial state of the class 
     */ 
     getInitialState() { 
      return { 
       startValue: null, 
       endValue: null, 
       startOpen: false, 
       endOpen: false, 
      }; 
     }, 


     //MARK: Calendar Helper Functions 


     /** 
     * Function called when the start calendar changes being open 
     * 
     * @param startOpen: a boolean representing whether or not the start textfields calendar is open 
     * @returns: void 
     */ 


onStartChange(value) { 
      console.log("new Camp Info") 
      console.log(this.props.newCampaignInformation); 
      console.log(value); 
      this.setState({ 
        startValue: value[0], 
        startOpen: false, 
        endOpen: false, 

       }); 
       this.props.onChange(value, this.props.number); 
      this.props.onOpenChange(this.props.newCampaignInformation); 

     }, 


     /** 
     * Function called when the selected end date changes 
     * 
     * @param value: an array with 2 values, the selected start date and end date 
     * @returns: void 
     */ 
     onEndChange(value) { 

      console.log("new Camp Info") 
      console.log(this.props.newCampInfo); 
      console.log(value); 
      this.setState({ 
       endValue: value[1], 
      }); 

      this.props.onChange(value, this.props.number);// 
      this.props.onOpenChange(this.props.newCampaignInformation); 

     }, 

     handleStartTimeChange(num, val) { 
      console.log(num); 
      console.log(val); 
      this.state.childElems[num].startTime = val/3600.0; 
      this.update(num); 
     }, 

     handleEndTimeChange(num, val) { 
      console.log(num); 
      console.log(val); 
      this.state.childElems[num].endTime = val/3600.0; 
      this.update(num); 
     }, 

     // removeChild(num){ 
     //  this.props.removeChild(this.props.number); 
     //  //this.update(num); 
     // }, 


     //MARK: Render Function 



     /** 
     * Render function for this class 
     * 
     * @param void: 
     * @returns: void 
     */ 
     render() { 
      const state = this.state; 
      return (
       <div style={{ display: "flex" }}> 
        <div style={{display: "flex"}}> 
        <div style={{display: "flex"}}> 
         {/* <input type = "button" style={{ display: "flex"}} type="button" className="button-add" onClick ={() => {this.removeChild()}}/> */} 
         <div> 
          { this.props.startDateLabel && 
           <label>{this.props.startDateLabel}</label> 
          }      
          <div> 
           <Picker 
            ref="startDate" 
            onOpenChange={this.onStartOpenChange} 
            type="start" 
            showValue={state.startValue} 
            open={this.state.startOpen} 
            disabledDate={this.disabledBeforeStartDate} 
            value={[state.startValue, state.endValue]} 
            onChange={this.onStartChange} 
            inputBorderColor={this.props.startDateBorderColor} 
           /> 
          </div> 
         </div> 
         &nbsp;&nbsp; 
         <div> 
          { this.props.startTimeLabel && 
           <label>{this.props.startTimeLabel}</label> 
          } 
          <TimePicker 
           className="timePickerSelect" 
           value={this.props.startTimeValue} 
           onChange={this.props.handleStartTimeChange.bind(this)} 
          /> 
         </div> 
        </div> 
        </div> 
        <div style={{display: "flex", marginLeft: "5%"}}> 
        <div style={{display: "flex"}}> 
         <div> 
          { this.props.endDateLabel && 
           <label>{this.props.endDateLabel}</label> 
          } 
          <div> 
           <Picker 
            onOpenChange={this.onEndOpenChange} 
            open={this.state.endOpen} 
            type="end" 
            showValue={state.endValue} 
            disabledDate={this.disabledStartDate} 
            value={[state.startValue, state.endValue]} 
            onChange={this.onEndChange} 
            inputBorderColor={this.props.endDateBorderColor} 
           /> 
          </div> 
         </div> 
         &nbsp;&nbsp; 
         <div> 
          { this.props.endTimeLabel && 
           <label>{this.props.endTimeLabel}</label> 
          } 
          <TimePicker 
           className="timePickerSelect" 
           value={this.props.endTimeValue} 
           onChange={this.props.handleEndTimeChange.bind(this)} 
          /> 
         </div> 
        </div> 
        </div> 
       </div> 
      ); 
     }, 
    }); 

Answer 1

使用しているデコレータ構文は、ES6クラスコンポーネントでのみ動作します。 React.createClassを使用するときは機能しません。だから、あなたが使用することができます。この

import React from 'react' 
import { connect } from 'react-redux' 

const mapStateToProps = (state) => ({ 
    newCampaignInformation: state.DealReducer.newCampaignInformation 
})) 

@connect(mapStateToProps) 
class CalendarPicker extends React.Components { 
    ... 
} 

のようなものはそうES6クラスコンポーネント、機能的ステートレスコンポーネント、またはReact.createClass部品

import React from 'react' 
import { connect } from 'react-redux' 

const mapStateToProps = (state) => ({ 
    newCampaignInformation: state.DealReducer.newCampaignInformation 
})) 

connect(mapStateToProps)(CalendarPicker) 

を使用してのようなデコレータなしで接続します