При нажатии вычеркните предметы и переместите эти предметы в конец списка - PullRequest
Новая
       52

При нажатии вычеркните предметы и переместите эти предметы в конец списка

0 голосов
/ 25 марта 2020

Я пытаюсь написать код, в котором, когда пользователь нажимает на элемент в списке, элемент в этом списке должен быть вычеркнут и перенести этот элемент в конец списка.

ItemList. js

<code> <ul className="list-group my-4">
        <h2 className="text-uppercase text-center custom-heading">todo list</h2>

        <div className="card card-body my-4 custom-card-bg">
          <pre>
            {items
              .slice(0)
              .reverse()
              .map(index => {
                return <ToDoItem key={index.id} name={index.name} />;
              })}

Приведенный выше код показывает, как данные добавляются в список

TodoItem. js

 <li className="list-group-item text-capitalize d-flex justify-content-between my-1 custom-input">
        <h6>{name}</h6>
        <div className="todo">
          <span className="mx-2 text-success">
            <i className="fas fa-pen" />
          </span>
          <span className="mx-2 text-danger">
            <i className="fas fa-trash" />
          </span>
        </div>
      </li>

Приведенный выше код является стилем элемента

Приложение. js

 class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          items: [],
          currentItem: {
            name: "",
            id: ""
          },
          editItem: false
        };
      }

    addItems = e => {
        e.preventDefault();
        const newItems = this.state.currentItem;
        if (newItems.name !== "") {
          const itemNames = [
            { ...newItems, isStriked: false },
            ...this.state.items
          ];
          this.setState({
            items: itemNames,
            currentItem: {
              name: "",
              id: ""
            },
            editItem: false
          });
        }
      };

      completedItem = id => {
        const complete = this.state.items.find(name => name.id === id);

        if (complete.isStriked === false)
          this.setState({
            items: [
              ...this.state.items.filter(name => name.id !== id),
              { ...complete, isStriked: true }
            ]
          });
      };

      render() {
        return (
          <div>
            <div
              className="container-fluid d-flex vh-100 flex-column"
              style={{ height: "100vh" }}
            >
              <div className="row">
                <div className="col-10 mx-auto col-md-8 mt-4 mb-2 custom-row-bg">
                  <h2 className="text-center text-uppercase mt-3 custom-heading">
                    input todo
                  </h2>
                  <InputItems
                    name={this.state.currentItem.name}
                    handleInputChanges={this.handleInputChanges}
                    addItems={this.addItems}
                  />
                  <ItemList
                    items={this.state.items}
                    completedItem={this.completedItem}
                  />
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

    export default App;

Вышеупомянутый код объясняет как я решил поработать над элементом элемента метода, я не могу понять, как заставить его работать в компоненте ItemList?

1 Ответ

1 голос
/ 25 марта 2020

, чтобы иметь возможность получить доступ к событию onClick в ItemList, вам нужно, чтобы компонент ToDoItem был активным: 

<ToDoItem
    onClick={() => {
      console.log(index);
    }}
    key={index.id}
    name={index.name}
/>

В ToDoItem:

В ToDoItem вы находитесь Вы можете решить, с какого элемента должен начаться щелчок. 

//...
const { name, onClick } = this.props;
//...
   <li
        onClick={onClick}
        className="list-group-item text-capitalize d-flex justify-content-between my-1 custom-input"
      >
//...

Обновление: 

let { items } = this.state;
let to = 0;
let from = 0;
items = items.map((item, index) => {
   if (item.id === id) {
     item.completed = true;
     from = index;
   }
   return item;
});
// here i'm move the object in top. Because you use revert array.
// If you don't want to reverse array: to = items.length
items.splice(to, 0, items.splice(from, 1)[0]);
...