Блог

Приведенный ниже код содержит три массива фотографий постов. Когда я нажимаю на каждую кнопку публикации, я должен видеть три раздела с фотографиями в нижней части, которые соответствуют каждому сообщению.

Моя проблема:

Моя проблема в том, что отображается только один раздел публикации фотографий, который продолжает заменять другие после того, как я добавил приведенный ниже CSS-код.

 const mainArea={
 position: 'fixed',
  width: '80%',
  bottom: '0%',
   display: 'inline-block'
}

const photodiv={
position: 'relative',
width: '250px',
  // height:auto,
  background: 'orange',
  color: 'black',
  borderRadius: '5px 5px 0px 0px',
  bottom: '0px',

}
  

скриншот, показывающий застрявший раздел, основанный на реализации CSS

Что я хочу: мне нужно видеть три div-файла с фотографиями, если нажать кнопку переключения трех

Вот основной код

 import React, { Component, Fragment } from "react";
import { render } from "react-dom";

const mainArea={
 position: 'fixed',
  width: '80%',
  bottom: '0%',
   display: 'inline-block'
}

const photodiv={
position: 'relative',
width: '250px',
  // height:auto,
  background: 'orange',
  color: 'black',
  borderRadius: '5px 5px 0px 0px',
  bottom: '0px',

}

class Focus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title", image: "http://localhost/apidb_react/1.png", visible: true , photoVisible: true},
        { id: "2", title: "my second title", image: "http://localhost/apidb_react/2.png", visible: true, photoVisible: true},
        { id: "3", title: "my third title", image: "http://localhost/apidb_react/3.png", visible: true, photoVisible: true}
      ]
    });
  }


  toggle(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, visible: !item.visible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }




/*

  hideUnhidePhoto(id) {

    const newData = this.state.data.map(item => {

alert(id);

      if(item.id === id) {
alert('ttto  '  item.id);
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }
*/



hideUnhidePhoto(id) {

    this.setState(({ data }) => {
        return { 
            data : data.map(item => ({ 
            ...item, 
            photoVisible : (id == item.id) ? !item.photoVisible : item.photoVisible }))
        }
    });
}



  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>

<div style={mainArea}>
<div style={photodiv}>
                <div style={{ display: post.visible ? "none" : "block"}}> 

<b>Post Data:</b> {post.title} --{post.id}   <br />

<span style={{color: 'red'}} onClick={ () => this.hideUnhidePhoto(post.id) }> Hide/Unhide Photo</span>

<div style={{ display: post.photoVisible ? "block" : "none"}}> 

<img src={post.image} />

</div>

</div></div>
</div>
 <button onMouseDown={ () => this.toggle(post.id) }>Toggle </button><br />


                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }







}
  

Если я правильно понимаю проблему, то это можно исправить, настроив ваш mainArea объект style следующим образом:

 const mainArea={
  /* position: 'fixed', Remove position fixed */
  width: '80%',
  bottom: '0%',
  display: 'inline-block'
}
  

fixed Положение в основном заключается в размещении элементов в определенном месте на экране относительно клиентской области окна. Это означает, что если у вас есть несколько элементов, которые имеют одинаковые координаты (по умолчанию) и расположены с fixed правилом, то эти элементы будут эффективно перекрывать друг друга. Это создает впечатление, что в любой момент времени виден только один элемент.

Рабочий пример смотрите в этом jsFiddle: введите описание ссылки здесь

Надеюсь, это поможет!