时间戳

首页 > 解决方案 > 如何禁用 PrimeReact ListBox 中的列表项之一？

reactjs - 如何禁用 PrimeReact ListBox 中的列表项之一？

问题描述

对于PrimeReact ListBox实现：

const cities = [
    {name: 'New York', code: 'NY'},
    {name: 'Rome', code: 'RM'},
    {name: 'London', code: 'LDN'},
    {name: 'Istanbul', code: 'IST'},
    {name: 'Paris', code: 'PRS'}
];

<ListBox 
  optionLabel="name" 
  optionValue="code" 
  value={city} 
  options={cities} 
  onChange={(e) => setCity(e.value)} 
/>

我得到了带有列表项的正确面板。但是如何禁用列表项，例如如果需要禁用纽约被选中，如何实现？

标签： reactjsprimereact

解决方案

解决方案是传递属性名称以匹配禁用状态的选项，如下所示：

const cities = [
  { name: 'New York', code: 'NY', disabled: true },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' },
];

<ListBox
  optionLabel="name"
  optionValue="code"
  value={city}
  options={cities}
  optionDisabled="disabled"
  onChange={(e) => setCity(e.value)}
/>

或者一个决定哪个被禁用的函数，其中选项是列表中的一项，而列表正在被迭代

const cities = [
  { name: 'New York', code: 'NY' },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' },
  { name: 'Paris', code: 'PRS' },
];

<ListBox
  optionLabel="name"
  optionValue="code"
  value={city}
  options={cities}
  optionDisabled={(option) => option.name === 'New York"}
  onChange={(e) => setCity(e.value)}
/>

推荐阅读