重新呈現陣營組成新的AJAX查詢參數值

我有以下反應組分提取的初始頁面加載像這樣的Ajax數據：重新呈現陣營組成新的AJAX查詢參數值

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') 
);

我的問題是，當日期是我不能重新呈現組件從日期選擇器更改，因此Ajax日期參數更改，並且需要使用這些新值創建另一個請求。

我已經試過：

$(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') 
     ); 

    }) 
})

，但似乎沒有發生。我該如何解決這個問題？並且只能使用JavaScript/jsx來完成，而不需要通量，最重要的是，不需要node.js？

Ps。在這個例子中我使用了FixedDataTable。

來源

2015-09-24 Dac0d3r

你不能使用事件參數，只要將日期選擇到您的組件，這樣每次事件接收組件更新的狀態，其中無線會導致你的組件重新渲染。 –

不幸的是，我認爲它不會起作用？據我所知，只有在有親子關係的情況下才有效。 https://facebook.github.io/react/tips/communicate-between-components.html - 但在這種情況下，我已經在MVC中構建了一個應用程序，當我知道反應時，我越來越多地使用它部分，但日期選擇器（從/到日期）和選擇下拉（語言）不是父反應組件 - 它們只是簡單的html標記。：/ – Dac0d3r

我在想組件偵聽事件，讓datepicker觸發組件正在偵聽的事件，所以不需要父子組件。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events –

答案是爲Furqan扎法爾說（感謝的人）。

爲了實現具有相同的邏輯的componentWillReceiveProps生命週期方法，並傳遞新的屬性。

$.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) 
     );

我與它得到的TypeError一個小問題：無法添加屬性方面，對象是不可擴展的 - 但那是因爲我原先創建的JavaScript組件和我在JSX重新描繪。它需要同..如：

如果我這樣做最初：

MyTable = React.createFactory(MyTable)

那麼這將無法正常工作時重新解析：

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

但這：

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

來源

2015-09-27 22:06:31 Dac0d3r

重新呈現陣營組成新的AJAX查詢參數值

回答

相關問題