如何在reactjs中在顶部显示已经选中的项目

Question

这里我在对象中有一组电子邮件和已检查的电子邮件，在此基础上，我在列表中显示已检查的电子邮件。我的问题是我们如何根据我在对象中的电子邮件在顶部显示已检查的电子邮件。

例如：

checkedEmails = {"demo1@yopmail.com": true,"demo4@yopmail.com": true,"demo5@yopmail.com": true}

和电子邮件列表 emails = [{"name": "demo1","email":"demo1@yopmail.com"},{"name": "demo3","email":"demo3@yopmail.com"}, {"name": "demo5","email":"demo5@yopmail.com"}, {"name": "demo2","email":"demo2@yopmail.com"}, {"name": "demo1","email":"demo1@yopmail.com"}, {"name": "demo6","email":"demo6@yopmail.com"}]

<div className="form-check">
  {
   emails && emails.length > 0 && emails.map((item, key) => {
     return (
         <div className="myr-list" key={key}>
         <input className="form-check-input" type="checkbox" checked={checkedEmails[item.email] ? true : false} name={item.email} onChange={props.onInputChange}/>
         <label className="form-check-label">
             {item.name}{" "}
         </label>
         </div>
      )
   })
 }
</div>

目前我正在使用上面的代码显示已检查的列表，但问题是我无法排序或在顶部显示已检查的电子邮件。谁能知道我们如何在 Reactjs 中实现这一目标。我已完成 this vanilla js 个答案，但它不适合我的情况。任何帮助将 appreciated.Thanks

Answer 1

最简单的方法是使用几个数组，其中一个保留已检查的电子邮件，另一个未检查。

然后像您所做的那样在顶部显示已选中，在其下未选中。

所以，我认为你的问题是如何得到这对数组，这是一个简单的算法问题。

const checkedEmailsList = Object.keys(checkedEmails)

const checked = [], unchecked = []

emails.forEach((item, idx) => {
  checkedEmailsList.includes(item.email) ? checked.push(item) : unchecked.push(item)
})

这是你真正的问题吗？

Answer 2

您也可以使用单个数组进行管理

emails = [
  { name: "demo1", email: "demo1@yopmail.com", checked: false },
  { name: "demo3", email: "demo3@yopmail.com", checked: false },
  { name: "demo5", email: "demo5@yopmail.com", checked: false },
];

onInputChange = (index) => {
    const checkedEmail = email.splice(index, 1)[0];
    checkedEmail['checked'] = true;
    email.unshift(checkedEmail);
}

<div>
  {emails.length > 0 &&
    emails.map((item, index) => {
      return (
        <div className="myr-list" key={index}>
          <input
            className="form-check-input"
            type="checkbox"
            checked={item.checked}
            name={item.email}
            onChange={(index) => props.onInputChange(index)}
          />
          <label className="form-check-label">{item.name}</label>
        </div>
      );
    })}
</div>

现在您可以使用单个数组进行排序了。

Answer 3

如果你必须对对象数组进行排序，我建议基于另一个对象编写自定义排序函数。

const checkedEmails = {"demo1@yopmail.com": true,"demo4@yopmail.com": true,"demo5@yopmail.com": true};

let emails = [{"name": "demo1","email":"demo1@yopmail.com"},{"name": "demo3","email":"demo3@yopmail.com"}, {"name": "demo5","email":"demo5@yopmail.com"}, {"name": "demo2","email":"demo2@yopmail.com"}, {"name": "demo1","email":"demo1@yopmail.com"}, {"name": "demo6","email":"demo6@yopmail.com"}];

按选中状态对电子邮件数组进行排序：

emails.sort((e1, e2) => {
    const e1Checked = checkedEmails[e1.email] || false;
    const e2Checked = checkedEmails[e2.email] || false;


    if (e1Checked && !e2Checked) {
        return -1;
    }
    
    if (!e1Checked && e2Checked) {
        return 1;
    }

    return 0;
});

要将类似的电子邮件也分组在一起，您可以像这样首先根据电子邮件值对电子邮件数组进行排序，然后按检查状态排序：

emails.sort((e1, e2) => {
    if(e1.email < e2.email) {
        return -1;
    }
    if(e1.email > e2.email) {
        return 1;
    }
    return 0;
});

如何在reactjs中在顶部显示已经选中的项目

How to show already checked items on top in reactjs

javascript

sorting

checkbox

reactjs