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

Posted 2023-02-22

【中文标题】如何禁用 PrimeReact ListBox 中的列表项之一？

【英文标题】：How to disable one of the list item in PrimeReact ListBox?

【发布时间】：2021-06-17 01:44:52

【问题描述】：

对于 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) 
/>

我得到了带有列表项的正确面板。但是如何禁用列表项，例如如果需要禁用 New York 以使其无法被选中，如何实现？

【参考方案1】：

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

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

【讨论】：

我试过optionDisabled=true来验证。好像行不通。所有的值都应该被禁用。但事实并非如此。

它不是那样工作的。 optionDisabled= 中的值需要与选项之一的 name 值相同。在你的情况下，“纽约”。试着像optionDisabled="New York" 那样写，你的第一个选项应该被禁用。如果你想禁用整个组件，你可以使用disabled=true prop

哦，好吧。但是，optionDisabled=(option) =>true 应该禁用所有项目吧？

虽然我只需要禁用列表中的一项，但我尝试optionDisabled=(option) =>true 只是为了验证。因为optionDisabled=(option) => option.disabled 不起作用。

是的，我也看到了这种情况。我正在寻找解决方案。但这是一个微不足道的功能:)