typescript React跟踪对象数组更改的最佳方式

m528fe3b 于 2022-11-26 发布在 TypeScript

关注(0)|答案(1)|浏览(140)

假设我有一个这样的对象数组，它存储在state中：

interface CheckItem {
  label: string;
  checked: boolean;
  disabled: boolean;
}

const [checkboxes, setCheckboxes] = useState<CheckItem[] | undefined>(undefined);

const checkboxArr: CheckItem[] = [
{label: 'item1', checked: true, disabled: false}, 
{label: 'item2', checked: false, disabled: false}
];

useEffect(() => {
  setCheckboxes(checkboxArr);
}, [])

//should remain disabled until changes are made
//should revert to disabled if changes are undone
<Button disabled={disabled}>Apply Changes</Button>

我还有一个按钮，它应该保持禁用状态，直到其中一个原始元素被更改。
跟踪数组中每个元素的任何属性更改的最佳方法是什么？数组可以是任意长度，因此我希望针对空间/时间进行优化。

typescript

来源：https://stackoverflow.com/questions/74536448/react-best-way-to-track-changes-to-an-array-of-objects

1条答案

按热度按时间

6yt4nkrj1#

通过你的问题我可以理解的是你想知道某人是否点击了复选框或不正确？
您可以通过将已创建的常量变量称为checkBoxArr并将其与新数组tempCheckBoxArr进行比较来跟踪更改。
假设我们创建一个数组const [tempCheckBoxArr, setTempCheckBoxArr] = useState<string[]>([])
这是一个空数组，我们可以在这个数组中存储项目的标签。
现在假设您在复选框上有一个onclick函数。
所以，

checkboxArr.map((checkbox) => {
  return(
      <div>
        <input type="checkbox" checked={checkbox.checked} onClick={() => handleCheckBox(checkbox.label)}/>
      </div>
  )
})

而函数handleCheckBox是：

const handleCheckBox = (label: string) => {
  if(!tempCheckBoxArr.includes(label)){
    tempCheckBoxArr.push(label)
    setTempCheckBoxArr(tempCheckBoxArr)
  }else{
    let tempArr = tempCheckBoxArr.filter((labelInclude) => labelInclude !== label)
    
    setTempCheckBoxArr(tempArr)
    
  }
}

通过我们创建的tempCheckBoxArr.length的长度，您可以跟踪按钮是否应禁用，以及是否有更改。
谢谢，如果您有任何问题，请随时发表评论。

赞(0）回复(0）举报 2022-11-26

我来回答

typescript React跟踪对象数组更改的最佳方式

1条答案

相关问题

热门标签

最新问答