问为什么ReactClass中的function函数在表单输入更改事件上被反复调用

EN

var SubjectBox = React.createClass({
  getInitialState(){
    return({
      totalHoursAndMinute:0,
      subject:'',
      workDone:'',
      hoursAndMinutes:'',

    })
  },
  dropDownSelected:function(e){
    this.setState({subject:e.target.value})
  },
  handleChangeToWorkDone(){
    let s = this.refs.workDone.getValue();
    console.log(s);
    this.setState({
      workDone: s
    });
  },
  validateWorkDone:function(){
    let length = this.state.workDone.length;
    if (length >= 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
  },
  validateHoursAndMinutes(){
    let hm = this.state.hoursAndMinutes.split(':');
    if (hm.length === 2){
      return 'success';
    }else{
      return 'error';
    }
  },
  handleChangeToHoursMinute(){
    var minutes =0;
    let s =this.refs.hoursAndMinutes.getValue();
    let hm =  s.split(':');
    if (hm.length===2){
      var h = parseInt(hm[0].trim());
      var m = parseInt(hm[1].trim());
      if (!m.isNaN){
        var minutes = h*60+m;
      }
    }
    this.setState({
      hoursAndMinutes: s,
      totalMinutes:minutes
    });
  },
  createList: function(){
    console.log("create list function.");
    var list=[];
    for (var i = 0; i < this.props.subjects.length;i++){
      list.push(<option key={i} value={this.props.subjects[i].subject}>{this.props.subjects[i].subject}</option>)
    }
    return list;
  },
  handleSubmit: function(e){
    e.preventDefault();
    console.log(this.state.workDone);
    console.log(this.state.subject);
  },
  render(){
    return(

        <form onSubmit={this.handleSubmit}>
          <Input ref="subjectList" type="select" label="Subject" onChange={this.dropDownSelected}>
            {this.createList()}
          </Input>
          <Input ref="workDone"
            type="text"
            value={this.state.workDone}
            placeholder="What did you do?"
            label="What did you do" help="Input is 10 or more characters."
            bsStyle={this.validateWorkDone()}  hasFeedback
            groupClassName="group-class" labelClassName="label-class"
            onChange={this.handleChangeToWorkDone} />
          <Input ref="hoursAndMinutes"
            type="text" value={this.state.hoursAndMinutes}  placeholder="HH:MM?"
            label="How long did you do it?"  help="Input in hours:minutes, example 1:5 = an hour and five minutes."
            bsStyle={this.validateHoursAndMinutes()}  hasFeedback
            groupClassName="group-class"
            labelClassName="label-class"   onChange={this.handleChangeToHoursMinute} />
          <Button type="submit" bsStyle="success">Submit</Button>
        </form>

    )
  }
});