按数据属性显示/隐藏元素（反应=

Question

如何使用react显示/隐藏列表中的元素？我有带有数据属性的按钮 我想要单击显示具有此类名称的元素并隐藏其他元素时。

此处的示例：

class ModelosItems extends React.Component {
  handleCheck(e) {
    console.log(e.currentTarget.dataset.gama );
  }
  render() {
    return (
      <section className="section">
        <div className="container">
          <h2 className="title is-size-4 has-text-centered is-uppercase has-text-weight-bold">Gama kia</h2>
          <div className="tabs-container">
              <div className="fade"></div>
              <div className="tabs">
                  <ul>
                      <li className="is-active"><a href="/" onClick={this.handleCheck.bind(this)} data-gama="todos">Gama Completa</a></li>
                      <li><a href="/" onClick={this.handleCheck.bind(this)} data-gama="citadinos_familiares">Cidatidos e Familiares</a></li>
                      <li><a href="/" onClick={this.handleCheck.bind(this)} data-gama="suv_crossovers">Suv e Crossover</a></li>
                    </ul>
              </div>
          </div>
          <ModelsList />
        </div>
      </section>
    );
  }
};

export default ModelosItems;

谢谢！

Answer 1

要隐藏其他数据并仅显示特殊数据，必须过滤列表。之后，例如，您可以添加一个CSS类，该类隐藏其他数据，并且只显示特殊数据。

教程：https://www.youtube.com/watch?v=HqQ-kOchqHM

Answer 2

为此使用本地状态。用第一个值（可能是todos）对其进行初始化，并在您相应地选择其他类型时对其进行更新。

接下来，将此状态数据属性作为prop传递给ModelsList组件，并仅过滤列表中的项目。

Answer 3

将状态引入ModelosItems

constructor(props) {
  super(props);
  this.state = {currentGama: null};
}

点击更新状态

handleCheck(e) {
  this.setState({
    currentGama: e.currentTarget.dataset.gama
  });
}

向ModelosItems gama添加新道具，并向其提供currentGama状态值

<ModelsList gama={this.state.gama} />

我在您的ModelList组件中

cars.filter(car => car.gama === this.props.gama).map(...

这将导致仅渲染具有正确伽马的汽车。这不使用类名来隐藏汽车。但是我认为这就是您所需要的。