基於數組中的對象屬性啟用/禁用復選框

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

對於禁用問題，您是否映射了項目？ 或者你只渲染數組中的每個對象？ 如果只渲染數組中的一項，則永遠不會滿足條件。