如何使用 react js 隐藏 div？

Question

我正在尝试制作一个带有反应的票务系统，我想制作一个名为 hide 的按钮，允许用户隐藏当前票务 div，所以基本上我认为为了做到这一点，我需要使用 onClick函数并将div的显示更改为隐藏，问题是我没有正确理解如何使用setState。

（我还有一个正在搜索特定票证的输入）

代码如下：

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';

export type AppState = {
    tickets?: Ticket[],
    search: string;
}


const api = createApiClient();

export class App extends React.PureComponent<{}, AppState> {

    state: AppState = {
        search: ''
    }

    



    searchDebounce: any = null;

    async componentDidMount() {
        this.setState({
            tickets: await api.getTickets()
        });
    }

    renderTickets = (tickets: Ticket[]) => {

        const Ticket = (props) => {
            const [isVisible, setIsVisible] = useState(true);
          
            const toggleVisibility = () => {
              setIsVisible(!isVisible);
            };
          
            return (
              <li key={props.id} className="ticket">
                <h6 className="hide" onClick={toggleVisibility}>
                  Hide
                </h6>
                <h5 className="title">{props.title}</h5>
                <p className="content">{props.content}</p>
                <footer>
                  { isVisible &&
                    (<div className="meta-data">
                      By {props.userEmail} |{" "}
                      {new Date(props.creationTime).toLocaleString()}
                    </div>)
                  }
                </footer>
              </li>
            );
          };
    }



    onSearch = async (val: string, newPage?: number) => {
        
        clearTimeout(this.searchDebounce);

        this.searchDebounce = setTimeout(async () => {
            this.setState({
                search: val
            });
        }, 300);
    }

    render() {  
        const {tickets} = this.state;

        return (<main>
            <h1>Tickets List</h1>
            <header>
                <input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            {tickets ? <div className='results'>Showing {tickets.length} results</div> : null } 
            {tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}
        </main>)
    }
}

export default App;

Answer 1

您可以使用状态隐藏元素，并在此状态下使用 if case，以仅在状态为 true 时显示元素。他们可以使用函数或在按钮的单击事件中切换状态：

const [isVisible, setIsVisible] = useState(true);

const toggleVisibility = () => {
 setIsVisible(!isVisible);
}

return (
   <>
   { isVisible && (<div>Hello world</div>)
   }
   </>
);

编辑 1：

正如我在评论中所说，使用组件来显示门票会更好：

import React, { useState } from "react";

const Ticket = (props) => {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <li key={props.id} className="ticket">
      <h6 className="hide" onClick={toggleVisibility}>
        Hide
      </h6>
      <h5 className="title">{props.title}</h5>
      <p className="content">{props.content}</p>
      <footer>
        { isVisible &&
          (<div className="meta-data">
            By {props.userEmail} |{" "}
            {new Date(props.creationTime).toLocaleString()}
          </div>)
        }
      </footer>
    </li>
  );
};

编辑 2

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Ticket = (props) => {
  const [isVisible, setIsVisible] = useState(true);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <li key={props.values.id} className="ticket">
      <h6 className="hide" onClick={toggleVisibility}>
        Hide
      </h6>
      <h5 className="title">{props.values.title}</h5>
      <p className="content">{props.values.content}</p>
      <footer>
        {isVisible && (
          <div className="meta-data">
            By {props.values.userEmail} |{" "}
            {new Date(props.values.creationTime).toLocaleString()}
          </div>
        )}
      </footer>
    </li>
  );
};

const App = () => {
  const tickets = [
    {
      id: 0,
      title: "ticket 1",
      content: "A ticket",
      creationTime: "12/02/2005",
      userEmail: "John@gmail.com",
    },
    {
      id: 1,
      title: "ticket 2",
      content: "A ticket",
      creationTime: "12/02/2005",
      userEmail: "John@gmail.com",
    },
  ];

  return (
    <>
      {tickets.map((ticket) => (
        <Ticket values={ticket} key={ticket.id} />)
      )}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

你可以在这里看到它的工作原理：Codepen Demo