Как открыть только 1 панель по клику на React? - PullRequest
Новая
       42

Как открыть только 1 панель по клику на React?

0 голосов
/ 31 января 2020

У меня есть кнопка на каждой из 3 панелей. Я смотрю на выпадающее сообщение на той панели, где я нажал кнопку. Но в настоящее время, когда я нажимаю на одну из кнопок, все 3 панели показывают выпадающее сообщение. Я читал об использовании индексирования, но не совсем уверен, как его добавить. Как я могу go решить эту проблему? 

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>

Ответы [ 2 ]

1 голос
/ 31 января 2020

Вы можете сделать это так. В вашем 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>
}

Надеюсь, это сработает для вас.

0 голосов
/ 31 января 2020 
    // 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>
...