如何在react-table中动态地为按钮添加值

时间:2017-10-26 15:18:33

标签: reactjs

我有一个反应表(使用react-table)组件,如下所示。在列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)}
    />)
}

使用上面的代码,我可以使用值“Approved”填充每个单元格中的按钮。但是,我想使用属性值动态填充此值,该属性值来自服务器对象“data”的request_state属性。使用“accessor:”我可以访问服务器端数据的这些属性值,但我无法对“Cell:”执行相同的操作。我可以使用访问器看到“邀请”字符串:

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

我基本上想要下面的内容:

{
    //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)}
    />)
}

1 个答案:

答案 0 :(得分: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)}
    />

},