我已经从MaterialUI获取了这个过滤器图标,并且当检查复选标记时,我需要它填充黑色(现在可以改变位置)。当一个框被选中时,setFilters 被填充。因此,如果选中产品类型的检查,则 setFilters(prt:[]) 不会为空。
如何设置以便如果 setFilters(prt:[]) 不为空,我可以用不同的位置渲染过滤器图标(最终我会渲染一个不同的图标)。
我已经试过了
{ props.filters > 0 && d.autoFilter ?
<FiFilter style={{position:"relative", top:"4px", left: "12px"}} onClick={() => props.toggleVisibleFilter(d.field)}/>:<div/>}
// component A
const [filters, setFilters] = useState({search:'',prt:[],cnt:[],cat:[]})
// Component B
const headerFields = [
{field: 'ID', label: '', width: '5%'},
{field: 'bnd', label: 'Brand', width: '15%' } ,
{field: 'cnt', label: 'Country', autoFilter: true, width: '15%' } ,
{field: 'prt', label: 'Product type', autoFilter: true, width: '20%' } ,
{field: 'cat', label: 'Category', autoFilter: true, width: '20%' } ,
{field: 'url', label: 'URL', width: '25%' } ,
]
// JSX
<TableRow>
{headerFields.map((d)=>
<TableCell
classes={{
root:classes.root
}}
style={{ textAlign:"left",fontSize:"18px", position:"sticky", width:d.width, background:"#F28808"}} align="left">{d.label}
{ d.autoFilter ?
<FiFilter style={{position:"relative", top:"4px", left: "4px"}} onClick={() => props.toggleVisibleFilter(d.field)}/>:<div/>}
{props.visibleFilter===d.field?<MultiSelectFIlter filterHandler={props.filterHandler} API_DATA={props.API_DATA} visibleFilter={props.visibleFilter} setVisibleFilter={props.setVisibleFilter} setFilters={props.setFilters} filters={props.filters} />:(null)}
</TableCell>
)}
</TableRow>
答案 0 :(得分:0)
你可以像这样使用条件方法
style={`${filters==[]} ? {display:"none"} : {display:"block"} `}
答案 1 :(得分:0)
根据您的上述条件,您有错误。因为当您检查数组是否为空时,您必须检查它的长度,而不仅仅是 props.filters
而是 props.filters.length
以使条件起作用,否则当数组已定义且长度为 0 props.filters
将始终返回 true;
也因为在您的情况下,您已将其定义为:
const [filters, setFilters] = useState({search:'',prt:[],cnt:[],cat:[]})
你的条件应该是这样的:
{ props.filters.prt.length > 0 ? ...