如何在数据更新后重新呈现Reactjs组件？

Question

这是我的组件的结构：

module.exports = React.createClass({ 

    getInitialState(){ 
     data = .... //by connecting to a db server 

     var properties = fun(...) //other functions manipulating the data 

     return { 

      data:data, 
      .... //other UI functions 

     } 

    onSearch(e){ 
      e.preventDefault(); 
      var startdate = React.findDOMNode(this.ref.start).value; 

      //******** here I want to update the data in the view using this new startdate 
      //so essentially I just want to replace "data = " in the getInitialState() bcoz I 
      //want other data manipulation functions from getInitialState to run as well.  
     } 

    render(){ 

     return(
      <form className = "dateform" onSubmit = {this.onSearch}> 
       <input type = "text" ref = "start" /> 
      </form> 

      ... 

      //other UI return stuff 
     ) 
    } 
)} 

我应该如何去这样做// *******？

我想只更新getInitialState（）中的数据变量，这取决于我在表单域中获得的日期。随后使用新数据刷新视图。我应该在onSearch函数中做什么改变？

这是一个正确的方法吗？

onSearch() 
{ 
    data = //make $.ajax call to get new data 
    this.setState({ 
     data: data 
    }); 

} 

Answer 1

看看状态in documentation here。您可以通过调用的setState方法类似这样的改变：

onSearch (e) { 
    // get somehow new data 

    this.setState({ 
     data: newData 
    }); 
}