Javascript 使用ReactJS更改列表中项目的顺序

我已经使用material UI和reactjs创建了一个列表，当一个新元素添加到列表中时，新元素将位于列表的顶部。 我有一个要求，当我点击列表中的一个元素时，该元素应该被划破，现在该元素应该被列在列表的底部。 我能够在单击时遍历元素，但是我不知道如何将元素放到列表的底部

我应该如何处理这个问题

这里展示了listlayout.js的代码，在这段代码中，列出了添加的项目，我需要找到在元素被划伤时更改列表顺序的方法

app.js

    class App extends Component {

    constructor(props) {
        super(props);
        this.state={
            items:[],
            newItem:{
                id:'',
                itemText:''
            },
            updateItem:false
        };
        this.handleInput = this.handleInput.bind(this);
        this.addItem = this.addItem.bind(this);
    }

handleInput = e =>{
        this.setState({
            newItem:{
                id:1 + Math.random(),
                itemText: e.target.value

            }
        });

};

    addItem = e =>{
        e.preventDefault();
         const typedItem = this.state.newItem;

        if(typedItem.itemText !==""){
            const typedItems=[...this.state.items,typedItem];
            this.setState({
                items:typedItems,
                newItem:{
                    id:'',
                    itemText: ''
                },
                updateItem:false
            })
        }
    };




    render() {
        return (
            <div >

                <HeaderBar/>


                             <ListLayout items={this.state.items}

                                        />


            </div>



        );
    }
}

export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州={
项目：[]，
新项目：{
id:“”，
itemText:“”
},
updateItem:false
};
this.handleInput=this.handleInput.bind（this）；
this.addItem=this.addItem.bind（this）；
}
handleInput=e=>{
这是我的国家({
新项目：{
id:1+数学.random（），
itemText:e.target.value
}
});
};
addItem=e=>{
e、 预防默认值（）；
const typedItem=this.state.newItem；
如果（typedItemText！==“”）{
常量typedItems=[…this.state.items，typedItem]；
这是我的国家({
项目：typedItems，
新项目：{
id:“”，
itemText:“”
},
updateItem:false
})
}
};
render（）{
返回(
);
}
}
导出默认应用程序；

ListLayout.js

const ToDoList=props=>{
const clearList=props.clearList；
const deleteItem=props.deleteItem；
const updateItem=props.updateItem；
常量罢工者=道具罢工者；
常量列表项=项=>{
返回{item.itemText}；
};
const completed=id=>{
document.getElementById（id）.style.textEdition=“行通过”；
返回true；
};
const stroketextmethod=id=>{
已完成（id）；
};
返回(
待办事项清单
{项目
.slice（0）
.reverse（）
.map（x=>(
strikeTextMethod（x.id）}
分隔器
>
))}


);
};
将默认值导出到列表；

您的代码似乎不是完整的解决方案。我不认为项目的定义是一个例子

但像这样的事情可能是一个解决办法

     const ToDoList = props => {

        const [items, setItems] = React.useState(props.items || []); // Initial values

        // Maybe you need to these lines to sync the items state.
        React.useEffect(
            () => {
                setItems(items)
            },
            [props.items]
        )

      const completed = id => {
        document.getElementById(id).style.textDecoration = "line-through";
        return true;
      };



      const strikeTextMethod = id => {
        const index = items.findIndex(x => x.id === id);
        const newItems = [items[index], ...items.slice(0, index - 1), ...items.slice(index + 1)]
        setItems(newItems);
        completed(id);
      };
      return (

     )

}

---

您必须在

strike

事件中为数组中的每个项目维护数据。您可以向数组项添加其他属性，如

istricked

或

status

。。差不多吧

---

然后你可以对它们进行相应的排序。

Welcome@Thumelee，你能分享你的代码吗，这样我们就可以帮助你了。你可以在点击后对数组进行排序。我已经添加了代码，我想我需要更改。你还需要其他代码吗？我已经添加了完整的代码，我有点无法理解这些代码，你能解释一下吗？改变列表的顺序意味着你的申请的另一种状态。您应该按照所需的顺序构建另一个数组并更改状态。我刚刚创建了一个名为

items

的新闻状态，并更改了它的顺序。（为了简单起见，您可以忘记

useffect

），因此我需要在app.js中添加另一个数组，在其中初始化状态？我不这么认为。我更新了我的答案。只需将代码添加到您的解决方案中。我更改了这一行：

const[items，setItems]=React.useState（props.items | |[]）我这样做了，但是当我单击添加项目时，该项目没有添加到列表中。评论不用于扩展讨论；这段对话已经结束。