Reactjs 如何在单击React时仅打开一个面板？

我在3个面板中各有一个按钮。我在单击按钮的面板中看到一条下拉消息。但目前，当我点击其中一个按钮时，所有3个面板都会显示下拉消息。我读过关于使用索引的内容，但我不确定如何添加索引。我怎样才能着手解决这个问题

export default class CustomerDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {
      listOpen: false,
    };
  }

  // Toggle the dropdown menu
  toggleList(name) {
    this.setState(prevState => ({
      listOpen: !prevState.listOpen
    }))
  }


  render() {
    const { listOpen } = this.state

    if (!this.state.customerDetails)
      return (<p>Loading Data</p>)
    return (<div className="customerdetails">
      <div className="addmargin">
        <div className="col-md-9">
          {this.state.customerDetails.data.map(customer => (
            <Panel bsStyle="info" key={customer.name}>

              <Panel.Heading>
                <Panel.Title componentClass="h3">{customer.name}</Panel.Title>
              </Panel.Heading>

              <Panel.Body>
                <img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
                <br line-height="110%"></br>
                <p align="left">{customer.desc}</p>

                {/* Toggle dropdown menu */}
                <div className="image-cropper">
                  <button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(customer.name)} /></button>

                  {listOpen && <ul className="dd-list">
                    <li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
                  </ul>}
                </div>

像这样改变这个函数

    {
      this.state.customerDetails.data.map((customer, index) => (
        <Panel bsStyle="info" key={customer.name}>

          <Panel.Heading>
            <Panel.Title componentClass="h3">{customer.name}</Panel.Title>
          </Panel.Heading>

          <Panel.Body>
            <img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
            <br line-height="110%"></br>
            <p align="left">{customer.desc}</p>

            {/* Toggle dropdown menu */}
            <div className="image-cropper">
              <button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>

              {customer.listOpen && <ul className="dd-list">
                <li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
              </ul>}
            </div>

---

你可以这样做。在您的状态中，声明一个变量，该变量指向要显示为的面板索引：

this.state = {
  listOpen: 0,
};

然后将toogleList方法修改为：

toggleList(index){
  this.setState({ listOpen: index })
}

最后，将JSX更改为：

---

希望这对您有用。

谢谢。它起作用了！为了确保可以在单击时关闭面板，我还添加了可见行：toggleListindex{this.setStateprevState=>{visible:！this.state.visible，listOpen:index}

toggleList(index){
  this.setState({ listOpen: index })
}

{this.state.customerDetails.data.map((customer, index) => (
    <Panel bsStyle="info" key={customer.name}>

      <Panel.Heading>
        <Panel.Title componentClass="h3">{customer.name}</Panel.Title>
      </Panel.Heading>

      <Panel.Body>
        <img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
        <br line-height="110%"></br>
        <p align="left">{customer.desc}</p>

        {/* Toggle dropdown menu */}
        <div className="image-cropper">
          <button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>

          {listOpen === index && <ul className="dd-list">
            <li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
          </ul>}
        </div>
    </PanelBody>
  <Panel>
}