2017-04-24 32 views
1
const ResultsTableViewComponent = ({data,applySorting,sorting,loading}) =>  
    {if(loading == true){ 
     return <h1></h1> 
     }else{ 
      return (<table className="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> 
       <thead> 
        <tr> 
         <th>Model</th> 
         <th className={setClass[0]} onClick={(event)=>{applySorting('buy_requests'),setHeaderClass(0)}}>Buy Requests</th> 
         <th className={setClass[1]} onClick={(event)=>{applySorting('median_price'),setHeaderClass(1)}}>Median Price </th> 
         <th className={setClass[2]} onClick={(event)=>{applySorting('median_age'),setHeaderClass(2);}}>Median Age </th> 
         <th className={setClass[3]} onClick={(event)=>{applySorting('page_visits'),setHeaderClass(3);}}>Page Visits </th> 
         <th className={setClass[4]} onClick={(event)=>{applySorting('listings_count'),setHeaderClass(4);}}>Listing Count </th> 
         <th className={setClass[5]} onClick={(event)=>{applySorting('leads_count'),setHeaderClass(5);}}>Leads Count</th> 
        </tr> 
       </thead> 
       <tbody> 
        {data.map((item, i) => 
         <tr key={i}> 
          <td>{item.x}</td> 
          <td>{item.percentage.buy_requests ? `${item.percentage.buy_requests.toFixed(2)}`:""}% ({item.value.buy_requests})</td> 
          <td>{item.value.median_price}</td> 
          <td>{item.value.median_age}</td> 
          <td>{item.percentage.page_visits ? `${item.percentage.page_visits.toFixed(2)}`:""}%({item.value.page_visits})</td> 
          <td>{item.percentage.listings_count ? `${item.percentage.listings_count.toFixed(2)}`:""}%({item.value.listings_count})</td> 
          <td>{item.percentage.leads_count ? `${item.percentage.leads_count.toFixed(2)}`:""}%({item.value.leads_count})</td> 
         </tr> 

        )} 
       </tbody> 
       </table>) 
     } 
    } 

這是我反應的官能成分,我想在表頭的點擊調用兩個函數applySorting()和setHeaderClass(),但不執行的功能。當我嘗試一次執行一個函數而不是兩個時,它可以正常工作。裏面定義的onClick不點火功能反應的官能comonent

回答

1

只需將,替換爲回調函數中的;即可。

<th className={setClass[0]} onClick={(event)=>{applySorting('buy_requests');setHeaderClass(0)}}>Buy Requests</th>