Как заставить элемент Todo исчезать при нажатии кнопки удаления - PullRequest
Новая
       43

Как заставить элемент Todo исчезать при нажатии кнопки удаления

0 голосов
/ 29 октября 2019

В настоящее время я изучаю, как использовать React, и недавно я обнаружил реагирующий источник для анимации одностраничных веб-приложений. Я понял, как заставить всю мою страницу исчезать, но я пытаюсь выяснить, как сделать так, чтобы при нажатии красной кнопки (x) элемент Todolist исчезал или выскальзывал при удалении. Вот сам сайт, так как я не хочу включать код для всех компонентов: https://rivet77.github.io

Я попытался поместить элемент Transition вокруг компонента Todos, который находится в методе рендеринга, ноэто не сработало так, как я хотел. Я не уверен, должен ли переход идти в этом файле (App.js) или в файле компонента (Todos.js) 

import React, {Component} from 'react';
import { 
  BrowserRouter as Router,
  Route
 } from 'react-router-dom';
 import { Spring, Transition, animated } from 'react-spring/renderprops';

// Components
import Header from './components/layout/Header';
import Todos from './components/Todos';
import AddTodo from './components/AddTodo';
import About from './components/pages/About';
import axios from 'axios';

import './App.css';


class App extends Component {
  state = {
    todos: []
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
      .then(res => this.setState({ todos: res.data }))
  }

  // Toggle Complete
  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo;
    }) });
  }

  // Delete Todo
  delTodo = (id) => {
    axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(res => this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)] }));
  }

  // Add Todo
  AddTodo = (title) => {
    axios.post('https://jsonplaceholder.typicode.com/todos?', {
      title,
      completed: false
    })
      .then(res => this.setState({ todos: [...this.state.todos, res.data] }));
  }

  render() {

    return (
      <Spring
        from={{ opacity: 0}}
        to={{opacity: 1}}
        config={{duration: 500}}
      >
        {props => (
          <div style={props}>
            <Router>
              <div className="App">
                <div className="container">
                  <Header />
                  <Route exact path="/" render={props => (
                    <React.Fragment>
                      <AddTodo AddTodo={this.AddTodo} />
                      <Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} />
                    </React.Fragment>
                  )} />
                  <Route path="/about" component={About} />
                </div>
              </div>
            </Router>
          </div>
        )}
      </Spring>

      );
  }
}

export default App;
...