根据 state.value 值隐藏/取消隐藏操作图标 reactjs [英] Hide/Unhide actions icons based on state.vallue value reactjs

问题描述

如果 data.STATUS 等于 MaterialTable APPROVED ，我想隐藏 approved/disapproved 按钮>.

I want to hide the approved/disapproved button if the data.STATUS is equal to APPROVED in MaterialTable.

const [data, setData] = useState([
{ID: 1, STATUS: "APPROVED"},
{ID: 2, STATUS: "FOR APPROVAL"},
{ID: 3, STATUS: "REJECTED"},
]);

<MaterialTable 
                icons={tableIcons}
                columns={columns}
                data={data}
                title="List of Advisory"
                style={{
                    overflowX: 'auto'
                }}
actions={[
 {
                        icon: tableIcons.Edit,
                        tooltip: 'Edit Advisory',
                        onClick: (event, rowData) => selectedAdvisory(rowData, 'Edit')
                    },
{
                icon: tableIcons.Delete,
                tooltip: 'Delete Advisory',
                onClick: (event, rowData) => selectedAdvisory(rowData, 'Delete')
              },
                    {
                        icon: tableIcons.ThumbsUpDownIcon,
                        tooltip: 'Approved/Disapproved Advisory',
                        onClick: (event, rowData) => selectedAdvisory(rowData, 'ApproveDisapprove')
                    },

{
                icon: tableIcons.PageviewIcon,
                tooltip: 'Preview',
                onClick: (event, rowData) => alert('You are about to view' + rowData.ADVISORYID)
              }

]}
                localization={{
                    header:{actions:'Actions'}
                }}
            />

如果 STATUS 是 APPROVED ，我想在操作列上隐藏批准/不批准图标.预先谢谢你

I want to hide the Approved/Disapproved icon on action column if the STATUS is APPROVED. Thank you in advance

材料界面: https://material-ui.com/components/tables/物料表: https://www.npmjs.com/package/material-table https://material-table.com/#/docs/get-started

推荐答案

在列属性中添加/放置操作图标/按钮.

Add/Put the action icons/buttons in columns property.

{ title: 'Actions', sorting: false, render: rowData =>
<Link to={`#`}
onClick={dosomething}
style={{display: rowData.state==='approved' ? 'none' : 'block'}}
onClick={dosomething}
<Approveicon>
</Link> }

因此可以控制每列的​​操作

so the actions per column can be controlled

这篇关于根据 state.value 值隐藏/取消隐藏操作图标 reactjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！