2017-10-26 17 views
0

私は以下のような反応テーブル(反応テーブルを使用)を持っています。列Stateでは、各セルのボタンを動的値でレンダリングします。サーバーのデータから取得したい値。上記のコードの使用反応テーブルでボタンに値を動的に追加する方法

enter image description here

{ 
    //Header: 'Download', 
    id: 'request_state', 
    filterable: false, 
    Cell: ({index}) => 
    (<Button id={"approve_" + index} 
      value={<FormattedMessage id={"Approve_" + index} defaultMessage={"Approved"} 
      fontSize={14} 
      minHeight={33} 
      minWidth={"100%"} 
      backgroundColor="transparent" 
      borderRadius={5} 
      icon={<Download size={13} color={'black'}></Download>} 
      onClick={() => this.handleDownloadDelivery(index)} 
    />) 
} 

、私は値が "承認済み" で、各セル内のボタンを取り込むことができます。しかし、私は、この値を、私がオブジェクト "data"のrequest_state属性で取得している属性値を使って動的に生成したいと思っています。 "accessor:"を使用すると、サーバー側のデータの属性値にアクセスできましたが、「Cell:」で同じことを行うことはできません。

{ 
    //Header: 'Download', 
    id: 'request_state', 
    filterable: false, 
    Cell: ({index}) => 
    (<Button id={"approve_" + index} 
     value={<FormattedMessage id={"Approve_" + index} defaultMessage={data.request_state}} 
     fontSize={14} 
     minHeight={33} 
     minWidth={"100%"} 
     backgroundColor="transparent" 
     borderRadius={5} 
     icon={<Download size={13} color={'black'}></Download>} 
     onClick={() => this.handleDownloadDelivery(index)} 
    />) 
} 

答えて

0

私は以下のようにそれを解決:

{ 
    id: 'invite_accept', 
    filterable: false, 
    accessor: data => { 
    let output =[]; 
    output = data.request_state; 
    if(output == 'invited') { 
     output = 'Accept Invitation' 
    } 
    return output; 
    }, 
    Cell: props => <Button id={"Approve_" + props} 
       value={<FormattedMessage id={"Approve_" + props} defaultMessage={props.value}/>} 
       fontSize={14} 
       minHeight={33} 
       minWidth= {"100%"} 
       backgroundColor="transparent" 
       border={10} 
       borderRadius={5} 
       icon={<Eye size={14} color={'black'}></Eye>} 
       onClick={() => this.handleApproveOrRequestDelivery(props)} 
    /> 

}, 
私は基本的に以下のような何かをしたい

{ 
    Header: 'State', 
    id: 'request_state', 
    filterable: false, 
    accessor: data =>{ 
       let output =[]; 
       output = data.request_state; 
       return output; 
      }, 
} 

:私はアクセサを使用して "招待" の文字列を見ることができました

関連する問題