Question

如何在Reactjs中使<div className="content-header">的点击可折叠

作为Reactjs的新手，我如何创建一个函数来处理onclick div部分以使其可折叠

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="main">
      <div className="content">
        <div className="content-header">
          <p>STEM</p>
        </div>
        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>
      </div>

      <div className="content">

        <div className="content-header">

          <p>STEM</p>

        </div>

        <div className="content-body">

          I am a STEM

          <br></br>

          I am STEM

        </div>

      </div>
    </div>
  );
}

这是它的样子

Answer 1

import React from "react";
import "./styles.css";

export default function App() {
  const [isShowBody, setIsSHowBody] = React.useState(false);

  const onClickHandler = () => {
    setIsSHowBody(isShowBody => !isShowBody);
  }

  return (
    <div className="main">
      <div className="content">
        <div className="content-header" onClick={onClickHandler}>
          <p>STEM</p>
        </div>
        { isShowBody && <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>}
      </div>
    </div>
  );
}

Answer 2

尝试：

import {React,useState} from "react";
import "./styles.css";

export default function App() {
  const [open,setOpen] = useState(false);

  const toggle = () => {setOpen(!open)}

  return (
    <div className="main">
      <div className="content">
        <div className="content-header" onClick={toggle}>
          <p>STEM</p>
        </div>
        {open?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
      </div>

    </div>
  );
}

如果有多个，则必须使用open数组：

import {React,useState} from "react";
import "./styles.css";

export default function App() {
  const [open,setOpen] = useState([false,false,false]);

  const toggle = (i) => {let copyOpen = open; open[i] = !open[i] ;setOpen(copyOpen)}

  return (
    <div className="main">
      <div className="content">
        <div className="content-header" onClick={()=>toggle(0)}>
          <p>STEM</p>
        </div>
        {open[0]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
        <div className="content-header" onClick={()=>toggle(1)}>
          <p>STEM</p>
        </div>
        {open[1]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
        <div className="content-header" onClick={()=>toggle(2)}>
          <p>STEM</p>
        </div>
        {open[2]?

        <div className="content-body">
          I am a STEM
          <br></br>
          I am STEM
        </div>:null
       }
      </div>

    </div>
  );
}

如何在Reactjs中创建div的可折叠onclick？

2 个答案: