如何在React上只打开1个面板？

Question

我在 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>

Answer 1

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

this.state = {
  listOpen: 0,
};

然后将您的工具toogleList方法修改为：

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

最后，将您的JSX更改为：

{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>
}

希望这对你有用。

Answer 2

    // Toggle the dropdown menu
    toggleList(index) {
      let customerDetails = this.state.customerDetails
      if (customerDetails.data[index].listOpen)
        customerDetails.data[index].listOpen = false
      else
        customerDetails.data[index].listOpen = true

      this.setState({ customerDetails })
    }

像这样改变这个功能

    {
      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>