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

Question

我使用材料 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;

ListLayout.js

const ToDoList = props => {
  const clearList = props.clearList;
  const deleteItem = props.deleteItem;
  const updateItem = props.updateItem;
  const strikeList = props.strikeList;

  const listItems = item => {
    return <div key={item.id}>{item.itemText}</div>;
  };

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

  const strikeTextMethod = id => {
    completed(id);
  };

  return (
    <div>
      <Grid container justify="center" alignContent="center">
        <Grid item xs={12} md={6}>
          <Typography variant="h6" className={classes.title}>
            To do List
          </Typography>

          <div className={classes.demo}>
            <List dense={dense}>
              {items
                .slice(0)
                .reverse()
                .map(x => (
                  <ListItem
                    key={x.id}
                    button
                    id={x.id}
                    onClick={() => strikeTextMethod(x.id)}
                    divider
                  >
                    <ListItemText primary={listItems(x)} />
                    <ListItemSecondaryAction></ListItemSecondaryAction>
                  </ListItem>
                ))}
            </List>
          </div>
        </Grid>
      </Grid>

      <br />
    </div>
  );
};

export default ToDoList;

Answer 1

您必须为数组中的每个项目维护strike 事件。您可以向数组项添加其他属性，例如 isStriked 或 status.. 类似的东西。

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

Answer 2

您的代码似乎不是完整的解决方案。我不以物品的定义为例。

但这样的事情可能是一种解决方法。

     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 (

     )

}