javascript - 过滤分配给用户的待办事项(隐藏和显示)

Question

我有一组users 和todos。 todos 数组中有对象，其中有 todos 和用户 id。我显示用户和他们的待办事项。当我点击一个用户时，它会隐藏他的待办事项。

Problem: How to set up filtering so that clicking the user again shows his todos. A disabled user obtains a class with the opacity property.

预期效果:

1. 我点击用户(id 1)
2. 隐藏分配给该用户的待办事项(只有用户 (id2) 和用户 (id3) 的待办事项可见
3. 点击用户(id2)
4. 隐藏分配给该用户的待办事项(只有用户 (id3) 的待办事项可见)
5. 再次点击用户(id1)
6. 显示该用户的隐藏待办事项(用户待办事项可见(id1 和 id3)

此处演示:https://stackblitz.com/edit/react-s7aags

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      users: [
        {
          id: 1,
          name: 'Martin'
        }, {
          id: 3,
          name: 'Gregor'
        }, {
          id: 2,
          name: 'Paul'
        }
      ],
      todos: [
        {
          user_id: 3,
          todos: ['swim', 'feed']
        }, {
          user_id: 1,
          todos: ['sleep', 'read']
        }, {
          user_id: 2,
          todos: ['drinking', 'dancing']
        }
      ],
      hideTodosUserId: ''
    };
  }

  filterTodos = (userId) => {
    console.log(userId);
    const hideTodos = this.state.todos.filter(item => item.user_id !== userId);
    console.log(hideTodos);

    this.setState({todos: hideTodos, hideTodosUserId: userId})
  }

  render() {
    return (<div>
      <ul>
        {
          this.state.users.map(user => {
            return <li key={user.id} onClick={() => this.filterTodos(user.id)} className={this.state.hideTodosUserId === user.id
                ? 'hideTodos'
                : ''}>{user.name}</li>
          })
        }
      </ul>
      <ul>
        {
          this.state.todos.map(items => {
            return <li key={items.id}>{items.todos.map(todo => <li key={todo.id}>{todo}</li>)}</li>
          })
        }
      </ul>
    </div>);
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

.hideTodos {
  opacity: 0.5;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

问题是您将原始的 TODO 列表替换为过滤后的列表，这使得无法从所选用户那里取回 TODOS。尝试在渲染中过滤它们并像这样保存选定的 user_id:

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [
        { id: 1, name: "Martin" },
        { id: 3, name: "Gregor" },
        { id: 2, name: "Paul" }
      ],
      todos: [
        { user_id: 3, todos: ["swim", "feed"] },
        { user_id: 1, todos: ["sleep", "read"] },
        { user_id: 2, todos: ["drinking", "dancing"] }
      ],
      selectedUserIds: []
    };
  }

  userIdHandler = userId => {
    this.setState(prevState => {
      // Get the current index of the selected user id, if it doesn't exist it'll be -1
      const userIdIndex = prevState.selectedUserIds.indexOf(userId);
      const newSelectedUserIds = [...prevState.selectedUserIds];
      if (userIdIndex === -1) {
        // Add the selected id
        newSelectedUserIds.push(userId);
      } else {
        // Remove the selected id using the previously found index
        newSelectedUserIds.splice(userIdIndex, 1);
      }
      return {
        selectedUserIds: newSelectedUserIds
      };
    });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.users.map(user => {
            return (
              <li
                key={user.id}
                onClick={() => this.userIdHandler(user.id)}
                className={
                  this.state.selectedUserIds.includes(user.id)
                    ? "hideTodos"
                    : ""
                }
              >
                {user.name}
              </li>
            );
          })}
        </ul>
        <ul>
          {this.state.todos
            .filter(
              todos => !this.state.selectedUserIds.includes(todos.user_id)
            )
            .map(items => {
              return (
                <li key={items.id}>
                  {items.todos.map(todo => (
                    <li key={todo.id}>{todo}</li>
                  ))}
                </li>
              );
            })}
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));