Fatal编程技术网
  • javascript/
  • Javascript 对任务列表过滤器作出反应

Javascript 对任务列表过滤器作出反应

javascript reactjs

Javascript 对任务列表过滤器作出反应,javascript,reactjs,Javascript,Reactjs,我一直在努力解决这个问题，虽然我得到了很好的建议，但我还没有能够将它变成一个适用于我的应用程序的可行解决方案。所以，我想我需要添加额外的上下文，看看是否有人能让我进入“啊哈！”时刻 我的待办事项列表有一个可用的过滤器。然而，由于我似乎无法在不使用改变状态的函数的情况下让它工作，所以我想提供更多的代码。基本上，我使用了一个名为Filter的组件，它呈现用于显示过滤列表（全部、活动、完成）的实际按钮。然后，此过滤器将onClick事件作为道具传递给App.tsx。这是我的App.tsx的代码，在这里

我一直在努力解决这个问题，虽然我得到了很好的建议，但我还没有能够将它变成一个适用于我的应用程序的可行解决方案。所以，我想我需要添加额外的上下文，看看是否有人能让我进入“啊哈！”时刻

我的待办事项列表有一个可用的过滤器。然而，由于我似乎无法在不使用改变状态的函数的情况下让它工作，所以我想提供更多的代码。基本上，我使用了一个名为Filter的组件，它呈现用于显示过滤列表（全部、活动、完成）的实际按钮。然后，此过滤器将onClick事件作为道具传递给App.tsx。这是我的App.tsx的代码，在这里一切正常。。。除了在选择过滤器选项后保留原始数据的部分

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/layout/Header';
import Todos from './components/Todos';
import AddTodo from './components/AddTodo.js';
import Contact from './components/pages/Contact';
import uuid from 'uuid';
import axios from 'axios';

import './App.css';
import Filter from './components/Filter';

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

  filAll = () => {
    this.setState({
      todos: this.state.todos
    });
  }

  filActive = () => {
    this.setState({
      todos: this.state.todos.filter(todo => !todo.completed)
    });
  }

  filComplete = () => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.completed)
    });
  }
  componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/todos?_limit=3')
      .then(res => this.setState({ todos: res.data }));
  }

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

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

  addTodo = title => {
    axios
      .post('https://jsonplaceholder.typicode.com/todos', {
        title,
        completed: false
      })
      .then(res => {
        res.data.id = uuid.v4();
        this.setState({ todos: [...this.state.todos, res.data] });
      });
  };

  render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <Route
              exact
              path="/"
              render={props => (
                <React.Fragment>
                  <AddTodo addTodo={this.addTodo} />
                  <Filter 
                  filAll={this.filAll}
                  filActive={this.filActive}
                  filComplete={this.filComplete}
                  />
                  <Todos
                    todos={this.state.todos}
                    markComplete={this.markComplete}
                    delTodo={this.delTodo}
                  />
                </React.Fragment>
              )}
            />
            <Route path="/contact" component={Contact} />
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./components/layout/Header”导入标题；
从“./components/TODO”导入TODO；
从“./components/AddTodo.js”导入AddTodo；
从“./components/pages/Contact”导入联系人；
从“uuid”导入uuid；
从“axios”导入axios；
导入“/App.css”；
从“./components/Filter”导入筛选器；
类应用程序扩展组件{
状态={
待办事项：[]
};
filAll=（）=>{
这是我的国家({
待办事项：this.state.todos
});
}
filActive=（）=>{
这是我的国家({
todos:this.state.todos.filter（todo=>！todo.completed）
});
}
完整性=（）=>{
这是我的国家({
todos:this.state.todos.filter（todo=>todo.completed）
});
}
componentDidMount（）{
axios
.get（'https://jsonplaceholder.typicode.com/todos?_limit=3')
.then（res=>this.setState（{todos:res.data}））；
}
markComplete=id=>{
这是我的国家({
todos:this.state.todos.map（todo=>{
if（todo.id==id）{
todo.completed=！todo.completed；
}
返回待办事项；
})
});
};
delTodo=id=>{
axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`）。然后（res=>
这是我的国家({
todo:[…this.state.todos.filter（todo=>todo.id！==id）]
})
);
};
addTodo=title=>{
axios
.post（'https://jsonplaceholder.typicode.com/todos', {
标题
已完成：false
})
。然后（res=>{
res.data.id=uuid.v4（）；
this.setState（{todos:[…this.state.todos，res.data]}）；
});
};
render（）{
返回(
(
)}
/>
);
}
}
导出默认应用程序；
您需要两种状态<代码>所有待办事项和
待办事项

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./components/layout/Header”导入标题；
从“./components/TODO”导入TODO；
从“./components/AddTodo.js”导入AddTodo；
从“./components/pages/Contact”导入联系人；
从“uuid”导入uuid；
从“axios”导入axios；
导入“/App.css”；
从“./components/Filter”导入筛选器；
类应用程序扩展组件{
状态={
所有待办事项：[]，
待办事项：[]
};
filAll=（）=>{
这是我的国家({
todos:[…this.state.allTodos]
});
}
filActive=（）=>{
这是我的国家({
todos:this.state.allTodos.filter（todo=>！todo.completed）
});
}
完整性=（）=>{
这是我的国家({
todos:this.state.allTodos.filter（todo=>todo.completed）
});
}
componentDidMount（）{
axios
.get（'https://jsonplaceholder.typicode.com/todos?_limit=3')
.then（res=>this.setState（{allTodos:res.data，todos:res.data}））；
}
markComplete=id=>{
这是我的国家({
allTodos:[…this.state.allTodos.map（todo=>{
if（todo.id==id）{
todo.completed=！todo.completed；
}
返回待办事项；
})]
});
};
delTodo=id=>{
axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`）。然后（res=>
这是我的国家({
todo:[…this.state.allTodos.filter（todo=>todo.id！==id）]
})
);
};
addTodo=title=>{
axios
.post（'https://jsonplaceholder.typicode.com/todos', {
标题
已完成：false
})
。然后（res=>{
res.data.id=uuid.v4（）；
const todos=[…this.state.allTodos，res.data]；
this.setState（{todos，allTodos:todos}）；
});
};
render（）{
const{todos}=this.state；
返回(
(
)}
/>
);
}
}

导出默认应用程序