ES6 React綁定更改

Question

在儀表板上工作，當選項更改時更改週期（即Month，Quarter等）時，我需要更新表。遇到綁定問題。

export default class SalesFinancialDiv extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {periods: null, period: null}; 
     this.onChange = this.onChange.bind(this); 
    } 

    componentDidMount() { 
     $.getJSON("/marketing-dashboard/sales-financial/periods", function(result) { 
      this.setState({periods: result, period: result[1]}); 
     }.bind(this)); 
    } 

    onChange(event) { 
     console.log(event.target.value); 
     this.setState({period: event.target.value}); 
    } 

    render() { 
     if(this.state.periods != null && this.state.period != null) { 
      return (
       <div> 
        <h3>Marketing Dashboard | Financial Data</h3> 
        <SalesFinancialPeriods periods={this.state.periods} onChange={this.onChange} /> 
        <SalesFinancialTable period={this.state.period} /> 
       </div> 
      ); 
     } else { 
      return (
       <div>Loading...</div> 
      ); 
     } 
    } 
} 

class SalesFinancialPeriods extends React.Component { 
    makeOptions(data) { 
     return (
      data.map(function(period) { 
       return (
        <option value={period}>{period}</option> 
       ) 
      }) 
     ); 
    } 
    render() { 
     return (
      <div id="sales-financial-periods"> 
       <select onChange={this.props.onChange} > 
        {this.makeOptions(this.props.periods)} 
       </select> 
      </div> 
     ); 
    } 
} 

class SalesFinancialTable extends React.Component { 
    render() { 
     return (
      <table className="table table-striped table-codero"> 
       <TableHeader /> 
       <TableBody period={this.props.period} /> 
       <TableFooter /> 
      </table> 
     ); 
    } 
} 

class TableBody extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {data: null, dates: null}; 
    } 

    componentDidMount() { 
     let url1 = "/marketing-dashboard/sales-financial/data/" + this.props.period; 
     let url2 = "/marketing-dashboard/sales-financial/dates/" + this.props.period; 
     $.getJSON(url1, function(result) { 
      this.setState({data: result}); 
     }.bind(this)); 
     $.getJSON(url2, function(result) { 
      this.setState({dates: result}); 
     }.bind(this)); 

    } 
    componentWillReceiveProps(nextProps) { 
     let url1 = "/marketing-dashboard/sales-financial/data/" + nextProps.period; 
     let url2 = "/marketing-dashboard/sales-financial/dates/" + nextProps.period; 
     $.getJSON(url1, function(result) { 
      this.setState({data: result}); 
     }.bind(this)); 
     $.getJSON(url2, function(result) { 
      this.setState({dates: result}); 
     }.bind(this)); 

    } 
    render() { 
     // 
    } 
} 

正如你所看到的最高水平類SalesFinancialDiv打完並得到periods和初始period它然後傳遞期間的SalesFinancialPeriods類建立下拉。另外，SalesFinancialDiv將兩個孩子的初始period傳遞給TableBody，這會觸發數據以填充表格。

正如我所說的，我需要弄清楚如何將新的選定時間段傳遞給TableBody類以啓動並獲取新的數據集。

更新改變<select>到<select onChange={this.props.onChange}>，我現在看到的父節點的變化，但我沒有看到父節點通過新period給孩子們。同事和我想，因爲最高級別的節點正在更新w/setState它會重新呈現兒童。還檢查了是否發送了xhr請求，而不是。

更新2實施componentWillReceiveProps並修復問題！由於

Answer 1

從React Docs：

安裝：componentDidMount

void componentDidMount()

調用一次， 只有在客戶端上（而不是服務器上），請立即初始 呈現發生後。在生命週期的這一點上，您可以訪問任何 參考（例如，訪問底層DOM 表示）。子組件的componentDidMount（）方法在父組件之前調用 。

所以componentDidMount只調用生命週期中的一次初始渲染後立即發生 - 與您的當前設置將不會有更多的AJAX調用，直到你打刷新。

您將不得不思考如何使用ComponentWillReceiveProps否則$ .getJSON（...）僅被調用一次。

PS

你或許應該考慮一些流量實現從部件會造成你很多問題的內部，讓AJAX請求。我建議Redux。