基于数组中的对象属性启用/禁用复选框

Question

我正在生成一个对象数组，然后将它们输出到一个列表中，每个对象都有一个复选框，如果选中，则将其添加到changeableElements数组中

我无法让它仅显示添加到数组中的对象以显示为选中状态，并且在选择 3 后还禁用所有其他复选框，我该怎么做？

             const [items, setItems] = useState(
               [...Array(301)].map(
                    (_, i) => ({ name: `element ${i}`, selected: false, id: `element_uid_${i}}` }),
                 ),
                   )
             const [changeableElements, setchangeableElements] = useState([])
             const updatechangeableElements = (item) => {
              setchangeableElements(changeableElements.concat(item))
             }

                    <ElementsListWrap>
          {items.slice(0, itemsLimit !== null ? itemsLimit : Infinity)
          .filter((item) => new RegExp(`^${searchValue.toLowerCase()}`).test(item.name))
          .map((item) => (
            <div
              key={item.name}
            >
              {console.log('bkakask',changeableElements.filter((i) => item.id === i.id))}
              <ElementWrap>
                <Checkbox
                  key={item.name}
                  onChange={() => updatechangeableElements({ ...item, selected: true })}
                  type="checkbox"
                  checked={changeableElements.filter(i => item.id === i.selected === true).length > 0}
                  disabled={items.filter((i) => i.selected).length > 2 && item.selected !== true}
                />
                {console.log(changeableElements.map(bla => item.id === bla.id))}
                {item.name}
              </ElementWrap>
            </div>
            ),
          )}
        </ElementsListWrap>

Answer 1

您正在将checked设置为filter的结果，该结果将始终是一个数组（有时为空），因此始终为真。

你可能需要使用这样的东西

    <Checkbox
       key={item.name}
       onChange={() => updatechangeableElements({ ...item, selected: true })}
       type="checkbox"
       checked={changeableElements.find(i => item.id === i && item.selected === true)}
       disabled={items.filter((i) => i.selected).length > 2 && item.selected !== true}
    />

---

更新

这应该处理选中和禁用状态。

 .map((item) => { const isChecked = item.selected && changeableElements.some(i => item.id === i); const isDisabled = !isChecked && (items.filter((i) => i.selected).length > 2); return ( <div key={item.name} > <ElementWrap> <Checkbox key={item.name} onChange={() => updatechangeableElements({ ...item, selected: true })} type="checkbox" checked={isChecked} disabled={isDisabled} /> {item.name} </ElementWrap> </div> )},

Answer 2

filter()不返回布尔值，如果checked属性为真，则checked复选框。

因此，您可能希望将选中的部分更改为：

checked={changeableElements.filter(item => item.id === item.selected === true).length > 0}

代替：

checked={changeableElements.filter(item => item.id === item.selected === true)}

对于禁用问题，您是否映射了项目？ 或者你只渲染数组中的每个对象？ 如果只渲染数组中的一项，则永远不会满足条件。