如何使用 React 中的按钮切换项目列表？答案

【问题标题】：How can one toggle a list of items using a button in React?如何使用 React 中的按钮切换项目列表？
【发布时间】：2020-01-30 16:56:37
【问题描述】：

我正在尝试使用切换按钮根据特定条件过滤项目列表。假设我们的列表是程序员的列表，每个人都知道 java、javascript 或两者都知道 java 和 javascript。首先，我们有一个所有程序员的列表和一个显示“knows java”和另一个显示“knows javascript”的切换开关，我们获取原始列表并对其进行过滤，以便我们返回了解 java 的程序员或知道javascript，取决于按下的切换。虽然有两个不同的过滤器，但都可以同时按下，它会返回整个原始列表。如果没有按下任何按钮，也会显示整个程序员的原始列表。到目前为止，我只在做一个切换，它的功能在技术上是有效的，但被窃听了。下面是一些代码来演示：

    handleToggleJavaProgrammersClick = () => {
    const { programmers } = this.state;
    // let's assume that programmers is an array of objects with the boolean properties
    // knowsJava and knowsJavascript
    const javaOnlyProgrammers = programmers.filter(
        (programmer) => !!programmer.knowsJava && !programmer.knowsJavascript,
    );

    this.setState({
        programmers: javaOnlyProgrammers;
    })

    return javaOnlyProgrammers;
};

然后当我们渲染一个按钮组件时，它的 onClick 属性接受this.handleToggleJavaProgrammersClick。问题是，假设我们想为handleToggleJavascriptProgrammersClick 做同样的功能。那么当我们将programmers的状态设置为javascriptOnlyProgrammers时，就会取当前状态，也就是我们过滤的只会java的程序员列表，再进一步过滤即可；它永远不会返回原始列表，只会无限过滤。

有没有办法在不一直设置状态的情况下做到这一点？也许设置一个布尔值来确定按钮是否被点击？任何帮助将不胜感激。提前致谢。

【问题讨论】：

你不应该从处理程序返回值，处理程序大多是 void 函数。在 React 应用程序中，状态将决定 UI 的外观。所以只需阅读您需要的状态

标签： javascript reactjs

【解决方案1】：

为什么不为您的状态添加一个新值，例如javaOnlyProgrammers？

class Toggler extends Component {
  state = {
    programmers: [],
    javaOnlyProgrammers :[]
  }
}

然后像您一直在做的那样在您的点击处理程序过滤器中。而不是返回 javaOnlyProgrammers，setState:

handleToggleJavaProgrammersClick = () => {
  this.setState({
    javaOnlyProgrammers: this.state.programmers.filter(
        (programmer) => !!programmer.knowsJava && !programmer.knowsJavascript,
    );
  });
};

【讨论】：