Изменение порядка элемента в списке с помощью ReactJS

Question

Я создал список с использованием пользовательского интерфейса материала и reactjs, и когда новый элемент добавляется в список, новый элемент будет go в верхней части списка. У меня есть требование, когда при нажатии на элемент в списке элемент должен быть зачеркнут, и теперь этот элемент должен быть указан внизу списка. Мне удалось зачеркнуть элемент при нажатии, но я не понимаю, как привести элемент в конец списка

Как мне решить эту проблему?

Код списка рассылки. js представлен здесь. В этом коде перечислены добавленные элементы, и мне нужно найти способ изменить порядок списков при нахождении элемента в элементе

приложение. 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 (

     )

}