javascript - 使用 react Hook 隐藏和显示名称

Question

• 我是 React Hooks 的新手，
• 在我的应用程序中，最初应该隐藏所有用户的姓名。
• 稍后，当我点击每个用户时，它应该会显示名称。
• 所以我使用了表演和布景表演。
• 当我尝试在浏览器中打印值时，我没有看到它。 return(<div>{show}users Data{setShow}
• 我为每个用户写了点击，但我不确定如何隐藏和显示。
• 我的应用程序中将有数百万用户，那么在我单击每个用户时隐藏和显示名称的最佳方式是什么
• 在下面提供我的代码片段和沙箱

https://stackblitz.com/edit/react-t1mdfj?file=index.js

import React, { Component, useState } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

function DataClick(){
  const [show, setShow]= useState(false);

  function showItem(e){
    console.log("e--->", e.target);
    setShow(true);
  }
  return(<div>{show}users Data{setShow}
  <div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user1</div>
    <div>John</div>
  <div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user2</div>
    <div>Mike</div>

    <div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user3</div>
    <div>Mike3</div><div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user4</div>
    <div>Mik4e</div><div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user5</div>
    <div>Mike5</div><div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user6</div>
    <div>Mike6</div><div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user7</div>
    <div>Mike7</div><div onClick= {showItem}
  //onClick={()=>setShow(true)}
    >user8</div>
    <div>Mike8</div>

  </div>);
}



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

Answer 1

@computer cool，请查看下面的实现，以在单击用户 id 时显示和隐藏用户名，这是@JMadelaine 实现的更新代码。希望这会有所帮助。 (在@JMadelaine 的实现中，我发现的一个缺点是，一旦显示用户名，再次单击用户 ID 时它不会隐藏，因为他总是将状态设置为 true onClick)，请参阅下面的代码。

import React, { Component, useState } from "react";

const UserItem = ({ user }) => {
  const [isNameShown, setIsNameShown] = useState(false)

  const handleChange = () => {
    setIsNameShown(prevState => !prevState)
  }

  return (
    <div onClick={handleChange} >
      <div>{user.id}</div>
      {isNameShown && <div>{user.name}</div>}
    </div>
  )
}

function DataClick() {
  const users = [
    {
      id: 'user1',
      name: 'John',
    },
    {
      id: 'user2',
      name: 'Peter',
    },
  ]

  return (
    <div>
      {users.map(user => <UserItem user={user} />)}
    </div>
  )
}


export default DataClick;

这里的 handleChange 函数通过传递回调函数而不是直接值来使用先前的值设置状态值，因此此回调函数将获取先前的状态作为参数并返回反转值，因此如果用户打开, 它会关闭，如果用户关闭它会打开。

编辑: 下面是代码setIsNameShown(prevState => !prevState)

的解释

setIsNameShown 或 useState 钩子(Hook)返回的任何函数都可以用以下方式编写。

第一种方式示例:

setIsNameShown(false)

在这里，您直接传递要设置的值，而不管之前的值。

第二种方式示例:

setIsNameShown((prevStateVariable) => {
    return !prevStateVariable
})

或者更简洁地说，这同样可以写成

setIsNameShown(prevStateVariable => !prevStateVariable)

在这种情况下，函数 setIsNameShown 接受回调函数，该回调函数接收先前状态(与该函数相关)作为参数。 因此，如果您需要将值设置为依赖于先前状态值的状态，请使用回调函数而不是直接提供值。