如何在reactjs中显示已检查的项目答案

【问题标题】：How to show already checked items on top in reactjs如何在reactjs中显示已检查的项目
【发布时间】：2021-05-21 23:39:51
【问题描述】：

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

例如：

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 回答，但它不适合我的情况。任何帮助将不胜感激。谢谢

【问题讨论】：

标签： javascript reactjs sorting checkbox

【解决方案1】：

如果您必须对对象数组进行排序，请根据我建议编写自定义排序函数的另一个对象。

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

【讨论】：

【解决方案2】：

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

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

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

const checkedEmailsList = Object.keys(checkedEmails)

const checked = [], unchecked = []

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

这是你真正的问题吗？

【讨论】：

是的，你是对的，但是在这样做之后，我应该如何将两者结合起来并显示在单个列表中？或者我应该先显示选中的项目列表，然后显示未选中的项目列表，（在两个列表中）？
这取决于你。您可以尝试两者并思考哪个更好或它们之间有什么区别。其实两者都可以满足你的需求。
好的，目前我正在显示两个不同的列表，但您可以在单个列表中显示吗？因为如果您可以通过组合两个列表来共享并在顶部显示选中的项目，那么它也可以减少我的代码。谢谢:)
这不是问题。您应该注意的唯一一件事是，如果您只想显示一个数组的项目。您或您的代码有必要知道检查了哪些项目。为此，您有很多解决方案。例如，您可以为每个项目添加一个属性来识别它是否被选中，此外您也可以只使用一个变量来记录它之前的项目被选中和之后的项目被取消选中的索引。在我看来，使用更少的代码来实现一个功能并不总是一件好事。

【解决方案3】：

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

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>

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

【讨论】：