更改状态为复选框

Question

使用此组件，用户可以将其标记为收藏夹。如果已标记，则checkbox将呈现为checked。 handleFavourite进行api调用以标记组件的最爱或其他方式。到目前为止，这是一个无国籍的组成部分。

我面临的问题是，当用户点击这些复选框时，checked属性不会更改，因为值favourite作为道具传递给组件。我如何使这项工作变得如此，以便复选框呈现为否选中，具体取决于历史记录，并在用户点击它们时自行更新。

createElement('input', {
  checked: favourite ? true : false,
  className: 'mark_favourite',
  type: 'checkbox',
  title: 'Mark favourite to make this public',
  onClick: () => handleFavourite(thingtomarkfav)}),
) 

handleFavourite = ({ id, favorite }) => {
  const newFav = (!favorite) ? 1 : 0;
  setFavourite(id, newFav);
};

export function setFavourite(id, status) {
  return fetch(`/things/${id}/favourite/${status}`, {
    method: 'POST',
    credentials,
  }).then(res => res.json());
}