rerender Reagire componente con il nuovo parametro di query AJAX Valori

Question

Ho il seguente reagiscono componente che recupera i dati Ajax sul caricamento della pagina iniziale, in questo modo:

var MyTable = React.createClass({ 

    getInitialState: function() { 
     return { 
      rows: [ 
       ['Something, ' '], 
       ['Something else', ' ']    ] 
     }; 
    }, 

    componentDidMount: function() { 
     var self = this; 
     $.get('http://domain.com/api/Orders/from-date/' + fromDate + '/to-date/' + toDate, 
      function(result) { 
       var newState = React.addons.update(this.state, { 
        rows: { 
         0: { 
          1: { $set: result } 
         } 
        } 
       }); 
       this.setState(newState);    
      }.bind(this) 
     ); 
    }, 

    render: function() { 
     return (

      <Table 
       rowHeight={50} 
       rowGetter={(rowIndex) => { 
        return this.state.rows[rowIndex]; 
       }} 
       rowsCount={this.state.rows.length} 
       onRowClick={this._onRowClick} 
       width={1000} 
       height={342} 
       groupHeaderHeight={40} 
       headerHeight={0}> 
       <ColumnGroup label="Products" 
          fixed={true}> 
        <Column label="" 
          width={col1} 
          dataKey={0} /> 
        <Column label="" 
          width={700} 
          dataKey={1} /> 
       </ColumnGroup> 
      </Table> 

     ); 
    } 
}); 
MyTable = React.createFactory(MyTable) 
React.render(MyTable(), 
    document.getElementById('my-table-container') 
); 

Il mio problema è che non riesco a rerender componente quando la data è cambiato da datepicker quindi il parametro data Ajax cambia e deve essere fatta un'altra richiesta con questi nuovi valori.

Quello che ho provato:

$(function(){ 
    $("#calculate-orders").on("click",function(){ 
     fromDate = document.getElementById("from-date").value; 
     toDate = document.getElementById("to-date").value; 

     React.render(MyTable(), 
      document.getElementById('my-table-container') 
     ); 

    }) 
}) 

Ma nulla sembra accadere. Come posso risolvere questo? E può essere fatto solo con JavaScript/jsx, senza la necessità di flusso e, soprattutto, senza node.js?

Ps. Sto usando FixedDataTable in questo esempio.

Answer 1

La risposta era come Furqan Zafar ha detto (grazie uomo).

Per implementare il metodo del ciclo di vita componentWillReceiveProps con la stessa logica e passare le nuove proprietà.

$.get('http://domain.com/api/Orders/from-date/' + nextProps.fromDate + '/to-date/' + nextProps.toDate, 
      function(result) { 
       var newState = React.addons.update(this.state, { 
        rows: { 
         0: { 
          1: { $set: result } 
         } 
        } 
       }); 
       this.setState(newState);    
      }.bind(this) 
     ); 

Ho avuto un piccolo problema con esso ottenere TypeError: Impossibile aggiungere contesto proprietà, oggetto non è estensibile - ma che era perché ho inizialmente avevo creato il componente con JavaScript e stavo rerendering in JSX. Ha bisogno di essere lo stesso .. ad esempio:

Se ho fatto questo inizialmente:

MyTable = React.createFactory(MyTable) 

Allora questo non avrebbe funzionato a rerender:

React.render(
    <MyTable fromDate={fromDate} toDate="{toDate}"/>, 
    document.getElementById('my-table-container') 
); 

ma questo sarebbe:

React.render(
    MyTable(
     { 
      'fromDate': fromDate, 
      'toDate': toDate 
     }), document.getElementById('my-table-container') 
    );