Question

我遇到了反应问题。我制作了一个datepicker组件，它被拆分为四个组件：

-1.category(which call the datepicker):state:chosenDate

 - 2. datepicker(props:  this.state.chosenDate from category)

    -2.1 navbar(props: chosenDate)
         -2.1.1 prev btn(change to last month)
         -2.1.2 next btn(change to next month)
    -2.2 month (props: chosenDate)
         -2.2.1 day.

所有状态都按类别保留，navbar和month组件中的用户事件可以更改状态（this.state.chosenDate）。

但是，当我运行该项目时，似乎navbar \ month \ day中的props不会按预期更新：

例如，当我单击导航栏中的prev btn时，类别中的状态而且datepicker和navbar中的道具已经改变了，但是下面的道具是哪个从datepicker传递到月份没有改变，更不用说那些了在白天。

任何人都可以帮助我吗？

//类别

getInitialState: function() {
  return {
    fieldsData: fieldData, //[]
    selectData: selectData,
    chosenDate: new Date(),
    showDatePicker: false
  }
},
handleDateChange: function(choice) {
  this.setState({
    chosenDate: choice
  })
},
render: function() {
  return ( 
   <div className="panel" >
      <Overlay customerStyle={styles.overlay} />
      <Datepicker customerStyle={styles.datePicker} 
                  chosenDate={this.state.chosenDate} 
                  onDateChange={this.handleDateChange}/ >
   </div>
  )
}

// Datepicker

render: function() {
  console.log("in datepicker   ", this.props.chosenDate);

  return (
    <div style={this.getStyles()} >
      <Navbar chosenDate={ this.props.chosenDate} 
              onArrowClick={this.props.onDateChange} />
      <Week />
      <Month chosenDate={this.props.chosenDate} \
              updateChosenDate={this.props.onDateChange} />

    </div>   
  )
}

//月

var Month = React.createClass({
  render:function() {
    var that = this;
    var showMonth = getDayDictOfMonth(this.props.chosenDate);

    // debugger;
    console.log("in Month   ",this.props.chosenDate);

    var firstIndex = showMonth.indexOf(1);
    var lastIndex = showMonth.lastIndexOf(1);

    var Days = showMonth.map(function(date,index){
      var cur_modify;
      if(index < firstIndex || index >= lastIndex) {
        cur_modify = "disabled";
      } else if (that.props.chosenDate.getDate()==date){
        cur_modify = "highlight";
      } else {
        cur_modify = "";
      }

      return <Day key={index} modifier={cur_modify} value={date} base={that.props.chosenDate}     updateChosenDate={that.props.updateChosenDate}/>
    });

    return (
      <div className="month-container clearfix">
        {Days}
      </div>
    )
}

// Navbar

var Navbar = React.createClass({
  changeDate:function(e) {  
    var month = this.props.chosenDate.getMonth();

    if(e.currentTarget.dataset.sign=="next") {
      month +=1;
    } else if (e.currentTarget.dataset.sign=="prev") {
      month -=1;
    }

    this.props.onArrowClick(new Date(this.props.chosenDate.getFullYear(),month,this.props.chosenDate.getDate()));
  },
  render:function() {
    console.log("in navbar   ",this.props.chosenDate);
    var style = Object.assign({},defaultStyle.root,this.props.customerStyle);

    return (
      <div style={style} className="">
        <img data-sign="prev" 
            style={Object.assign({},defaultStyle.img,defaultStyle.imgLeft)}
            src="/src/images/arrow_left.png" 
            alt="prev"
            onClick={this.changeDate}/>

        <span style={defaultStyle.title}>
          {this.props.chosenDate.getFullYear()+" 年 "+(this.props.chosenDate.getMonth()+1)+" 月"}
        </span>

        <img data-sign="next" style={Object.assign({},defaultStyle.img,defaultStyle.imgRight)}
          src="/src/images/arrow_right.png" alt="next"
          onClick={this.changeDate}
        />
      </div>
    )
  }
})

这个孩子的子组件的this.props没有响应更新

0 个答案: