将 onClick 按钮分配给适当的功能。映射函数 ReactJS

Question

我创建了这个模型，并试图将它应用到现实生活中 component mockup

我从一些简单的东西开始，所以我创建了 3 个按钮和一个数组 但是发生的情况是，当我单击任何按钮时，我会看到所有功能，而我的目标是当我单击 SMS 时，我会看到 sms.features 等。但现在我看到的是这种方式current result

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHidden: true,
      features: [
        {
          name: "sms.features",
          key: "1",
          icon: "sms icon"
        },
        {
          name: "pricing.features",
          key: "2",
          icon: "pricing icon"
        },
        {
          name: "api.features",
          key: "3",
          icon: "api icon"
        }
      ],
      buttons: [
        {
          name: "sms",
          key: 1
        },
        {
          name: "pricing",
          key: 2
        },
        {
          name: "api",
          key: 3
        }
      ]
    };
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden() {
    this.setState({
      isHidden: !this.state.isHidden
    });
  }

  render() {
    return (
      <div style={{ marginLeft: "20%" }}>
        <div className="features__details__grid">
          {!this.state.isHidden &&
            this.state.features.map((object, key) => (
              <div key={key}>{object.name}</div>
            ))}
        </div>
        <div className="buttons">
          {this.state.buttons.map((button, key) => (
            <div key={key}>
              <button onClick={this.toggleHidden}>{button.name}</button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

所以，既然你只想显示一个，isHidden 应该是一个指向哪个功能应该可见的指针（通过定位key 属性）

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visibleFeature: "0",
      features: [
        {
          name: "sms.features",
          key: "1",
          icon: "sms icon"
        },
        {
          name: "pricing.features",
          key: "2",
          icon: "pricing icon"
        },
        {
          name: "api.features",
          key: "3",
          icon: "api icon"
        }
      ],
      buttons: [
        {
          name: "sms",
          key: "1"
        },
        {
          name: "pricing",
          key: "2"
        },
        {
          name: "api",
          key: "3"
        }
      ]
    };
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden(key) {
    this.setState(state=>{
      if (state.visibleFeature === key) return {visibleFeature: 0}
      
      return {visibleFeature: key}
    });
  }

  render() {
    const feature = this.state.visibleFeature;
    return (
      <div style={{ marginLeft: "20%" }}>
        <div className="features__details__grid">
          {this.state.features.map((object) => (
              feature === object.key && <div key={object.key}>{object.name}</div>
            ))}
        </div>
        <div className="buttons">
          {this.state.buttons.map((button) => (
            <div key={button.key}>
              <button onClick={()=>this.toggleHidden(button.key)}>{button.name}</button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

https://codesandbox.io/s/8y5q120wxj的演示