1
votes

Comment renvoyer un élément dans les fonctions de classe React

Comment renvoyer un élément dans les fonctions de classe react en un clic. est-ce même possible?

class Item extends Component {
  constructor(props) {
    super(props);
    this.itemInfo = this.itemInfo.bind(this);
  }


  itemInfo = () =>{ 
   return <div> some info</div>

  }


  render(){
   return(
     <div>
       <div onClick={this.itemInfo}> Click Here <div>
     </div>
    )
   }

 }

reactjs

3 commentaires

Qu'est-ce que tu veux faire? :)

Je ne veux pas utiliser l'état car il existe de nombreux états. Je voulais simplement renvoyer un bloc de jsx en fonction lui-même sur un événement

Cela ne fonctionnera pas comme vous le pensez. Vous devriez vous renseigner sur le rendu conditionnel: reactjs.org/docs/conditional-rendering.html

4 Réponses :

0
votes

Vous devriez le faire dans state .

 return(
     <div>
       <div onClick={this.itemInfo}> Click Here <div>
        {this.state.component}
     </div>
    )

et restituer le composant comme ceci

  itemInfo = () =>{ 
   this.setState({ component:<div> some info</div> }); 
  }

0 commentaires

0
votes

Vous pouvez essayer quelque chose comme ceci, en utilisant l'état et le rendu conditionnel:

class Item extends Component {
  constructor(props) {
    super(props)

    this.state = {
      showMore: false,
    }
  }

  toggleShowMore = () => {
    this.setState({ showMore: !this.state.showMore })
  }

  render() {
    return (
      <div>
        <div onClick={this.toggleShowMore}>
          {this.state.showMore ? 'Show less' : 'Show more'}
        </div>

        {this.state.showMore ? <div>some info</div> : null}
      </div>
    )
  }
}

0 commentaires

0
votes

Voici comment je procéderais:

function ItemInfo() {
  return(
    <div>Some Info</div>
  );
}


class Item extends Component {
  constructor(props) {
    super(props);
    this.handleClick= this.handleClick.bind(this);
    this.state = {
      showInfo: false
    }
  }

 handleClick() {
   this.setState((prevState) => {showInfo: !prevState.showInfo});
 }


  render(){
   return(
     <div>
       <div onClick={this.handleClick}> Click Here <div>
       { this.state.showInfo ? 
          <ItemInfo/>
          : null }
     </div>
    )
   }

 }

0 commentaires

1
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

class Item extends React.Component {
  state = {
    showDiv: false
  };

  render() {
    return (
      <div>
        <div
          style={{ cursor: "pointer" }}
          onClick={() =>
            this.setState(prevState => ({
              showDiv: !prevState.showDiv
            }))
          }
        >
          Click Me
        </div>
        {/*Show the INFO DIV ONLY IF THE REQUIRED STATE IS TRUE*/}
        {this.state.showDiv && <InfoDiv />}
      </div>
    );
  }
}

//This is the div which we want on click
var InfoDiv = () => (
  <div style={{ border: "2px solid blue",borderRadius:10, padding: 20 }}>
    <p> Long Text DIVLong Text DIVLong Text DIVLong Text DIVLong Text DIV </p>
  </div>
);
ReactDOM.render(<Item />, document.getElementById("root"));

0 commentaires