1
votes

Réagir - masquer et afficher l'élément individuel

J'essaie de basculer entre afficher / masquer des éléments individuels. Je pensais que la clé = {item._id} suffirait pour basculer les éléments individuels, mais en cliquant sur le bouton bascule, chaque élément est révélé.

Voici ma tentative: https: // codesandbox .io / s / soif-torvalds-xnkt1? file = / src / App.js

J'apprécierais vraiment toute suggestion. Merci

reactjs

0 commentaires

5 Réponses :

2
votes

Vous pouvez simplement changer la variable show dans l'état pour prendre l'index de l'élément comme ceci:

 const listItem = list.map(item => {
      return (
        <div className="flex p-4">
          <div key={item._id}>{item.book}</div>
          <button
            onClick={() => this.handleShow(item._id)}
            className="px-4 font-bold bg-gray-300"
          >
            toggle
          </button>
          <div>{this.state.show === item._id ? <div>{item.author}</div> : null}</div>
        </div>
      );
    });

et votre constructeur devient:

 constructor(props) {
    super(props);
    this.state = {
      show: -1
    };
  }

0 commentaires

1
votes

si vous voulez les afficher individuellement, vous pouvez faire comme ceci:

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

const list = [
  {
    _id: "1",
    book: "Witcher 1",
    author: "Andrzej Sapkowski"
  },
  {
    _id: "2",
    book: "Witcher 2",
    author: "Andrzej "
  },
  {
    _id: "3",
    book: "Witcher 3",
    author: "Andrzej Sapkowski"
  }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: false,
      showId: null,
    };
  }

  handleShow = (id) => {
    this.setState({
      showId: id
    });
  };

  render() {
    const listItem = list.map(item => {
      return (
        <div className="flex p-4">
          <div key={item._id}>{item.book}</div>
          <button
            onClick={() => this.handleShow(item._id)}
            className="px-4 font-bold bg-gray-300"
          >
            toggle
          </button>
          <div>{this.state.showId === item._id ? <div>{item.author}</div> : null}</div>
        </div>
      );
    });

    return (
      <div className="text-2xl">
        <div>List of books</div>
        {listItem}
      </div>
    );
  }
}

0 commentaires

2
votes

vous pouvez enregistrer la liste dans l'état et ajouter un accessoire isToggle pour chaque objet, et handleShow changer l'état isToggle de l'élément cible cliqué, le code ressemblera à ceci:

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

const list = [
  {
    _id: "1",
    book: "Witcher 1",
    author: "Andrzej Sapkowski",
    isToggle: false,
  },
  {
    _id: "2",
    book: "Witcher 2",
    author: "Andrzej ",
    isToggle: false,
  },
  {
    _id: "3",
    book: "Witcher 3",
    author: "Andrzej Sapkowski",
    isToggle: false,
  }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list
    };
  }

  handleShow = (e) => {
    const index = this.state.list.findIndex(t => t._id === e.currentTarget.dataset.id);
    const list = [...this.state.list];
    list[index].isToggle = !list[index].isToggle;
    this.setState({ list });
  };

  render() {
    const listItem = list.map(item => {
      return (
        <div className="flex p-4">
          <div key={item._id}>{item.book}</div>
          <button
            data-id={item._id}
            onClick={this.handleShow}
            className="px-4 font-bold bg-gray-300"
          >
            toggle
          </button>
          <div>{item.isToggle ? <div>{item.author}</div> : null}</div>
        </div>
      );
    });

    return (
      <div className="text-2xl">
        <div>List of books</div>
        {listItem}
      </div>
    );
  }
}

0 commentaires

3
votes

Vous pouvez diviser cela en un composant et y maintenir l'état de bascule qui est "show". J'ai mis à jour ma réponse dans votre lien CodeSandbox cliquez ici a>

//App.js

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import Book from './Book';

const list = [
  {
    _id: "1",
    book: "Witcher 1",
    author: "Andrzej Sapkowski"
  },
  {
    _id: "2",
    book: "Witcher 2",
    author: "Andrzej "
  },
  {
    _id: "3",
    book: "Witcher 3",
    author: "Andrzej Sapkowski"
  }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    const listItem = list.map(item => {
      return (
        <div className="flex p-4">
          <div key={item._id}>{item.book}</div>
          {/* <button
            onClick={this.handleShow}
            className="px-4 font-bold bg-gray-300"
          >
            toggle
          </button>
          <div>{this.state.show ? <div>{item.author}</div> : null}</div> */}
          <Book item={item}/>
        </div>
      );
    });

    return (
      <div className="text-2xl">
        <div>List of books</div>
        {listItem}
      </div>
    );
  }
}

// Book.js
import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleShow = () => {
    this.setState({
      show: !this.state.show
    });
  };

  render(){
    return(
      <>
          <button
            onClick={this.handleShow}
            className="px-4 font-bold bg-gray-300"
          >
            toggle
          </button>
          <div>{this.state.show ? <div>{this.props.item.author}</div> : null}</div>
      </>
    )    
  }
}

0 commentaires

1
votes

Code mis à jour et fonctionnel ici

Modifications du code:

Dans la structure de données de la liste

render() {
const listItem = this.state.books.map(item => { //use state to iterate
  return (
    <div key={item._id} className="flex p-4">
      <div key={item._id}>{item.book}</div>
      <button
        id={item._id} //add key to get the selected book
        onClick={this.handleShow}
        className="px-4 font-bold bg-gray-300"
      >
        toggle
      </button>
      <div>{item.show ? <div>{item.author}</div> : null}</div> // use key  `show` to toggle it 
    </div>
  );
});

Dans le constructeur

handleShow = event => {
    console.log(event.target.id);
    const books = this.state.books;
    const bookId = event.target.id; // get selected book id

    for (let index = 0; index < books.length; index++) {
      if (bookId === books[index]._id) {
        books[index].show = !books[index].show; //toggle the element 
      }
    }
    this.setState({ books });
  };

dans handleShow

constructor(props) {
    super(props);
    this.state = {
      books: list // defined books state
    };
  }

Dans render:

XXX

1 commentaires

RIYAJ KHAN merci tellement ça marche !!!!!!!!!!