Javascript 为什么在表单输入更改事件中重复调用ReactClass中的react函数

我有一个react引导react类，其中createList函数在表单输入（workDone或hoursAndMinutes）的每个键输入上都被调用。我对reactjs还不熟悉，也许这是正常的行为，但在我看来不是，因此我做错了什么

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>

    )
  }
});

var SubjectBox=React.createClass({
getInitialState（）{
返回({
总小时和分钟：0，
主题：''，
工作一：“，
小时和分钟：“”，
})
},
下拉选择：功能（e）{
this.setState（{subject:e.target.value}）
},
handleChangeToWorkDone（）{
设s=this.refs.workDone.getValue（）；
控制台日志；
这是我的国家({
工作一：s
});
},
validateWorkDone:函数（）{
设length=this.state.workDone.length；
如果（长度>=10）返回“成功”；
否则，如果（长度>5）返回“警告”；
否则如果（长度>0）返回“错误”；
},
验证小时和分钟（）{
设hm=this.state.hoursAndMinutes.split（“：”）；
如果（hm.length==2）{
回归"成功",；
}否则{
返回“错误”；
}
},
handleChangeToHoursMinute（）{
var分钟=0；
设s=this.refs.hoursandmins.getValue（）；
设hm=s.split（“：”）；
如果（hm.length==2）{
var h=parseInt（hm[0].trim（））；
var m=parseInt（hm[1].trim（））；
如果（！m.isNaN）{
var分钟=h*60+m；
}
}
这是我的国家({
小时和分钟：s，
总计分钟：分钟
});
},
createList:function（）{
log（“创建列表函数”）；
var列表=[]；
for（var i=0；i

发生这种情况是因为您在

handleChangeToWorkDone

和

handleChangeToWorkDone

中使用调用

re render

setState（）

将始终触发重新渲染，除非有条件 渲染逻辑在

shouldComponentUpdate（）

中实现。如果可变 正在使用对象，并且无法在中实现逻辑

shouldComponentUpdate（）

，仅当新状态为 与前一状态不同将避免不必要的重新渲染

---

在React Js中，HTML/DOM始终只是React组件状态的表示

每当出现onChange、onBlur或任何事件时，如果React组件的状态发生更改（使用setState func），则ReactJs组件将重新渲染（使用Render func）

只有当React Js组件的状态更改时，您的UI才能使用您输入的值进行更新。因此，这是React Js中的预期行为