Javascript 为什么输入元素没有与React中的其他数据一起排序？

在这里面有一个React应用程序，它呈现ToDo的列表。它使用.map索引参数作为键值来呈现此列表

我在初始加载后添加了一些项目，然后我看到：

然后我按日期排序，并在第一项中键入一些内容

然后单击“按最新排序”，得到以下结果：

问：为什么React在按下“按最新按钮排序”后不会改变with text的位置？您能否详细说明一下在按下按钮后发生的算法或事件顺序

注意：是的-我知道使用.map索引是这种行为的根源，所以请不要建议将此处的键属性更改为有意义的内容。这个例子很好，正确地描述了我的问题

另一方面，这是对的派生，询问不同的事情。

因为react使用键推断行的标识，如果更新除键以外的所有字段，react将在更新数据时看到这一点，但行保持静止，另一个极端是，如果只更改关键点，但保留所有数据，则相同的行将被视为已移动

因此，问题是使用索引作为键，您告诉react，您在输入框中键入的值属于第1行中的任何todo，因为这是其给定的键属性，在处理可排序列表时，键应该是该数据段特有的。如果你改为

<ToDo key={todo.id} {...todo} />

那么在分类之后我们有

<li><input value="this is my second input text" /></li>
<li><input value="this is my input text" /></li>

<li key=2><input value="this is my second input text" /></li>
<li key=1><input value="this is my input text" /></li>

那么在分类之后我们有

<li><input value="this is my second input text" /></li>
<li><input value="this is my input text" /></li>

<li key=2><input value="this is my second input text" /></li>
<li key=1><input value="this is my input text" /></li>

但如果我们只是改变我们得到的文本：

<li key=1><input value="this is my second input text" /></li>
<li key=2><input value="this is my input text" /></li>

---

现在很明显，什么是移动，什么是编辑。

React在JSX数组中有处理非受控输入的机制吗？它如何知道输入中的数据链接到某个元素？@zmii我认为在ToDo组件中，在捕获数据并将更改数据应用到行数据结构方面需要更复杂一些。它知道，因为输入值是标记的一部分。