Question

我是新来反应钩子的人，
最初在我的应用中，所有用户名称都应隐藏。
稍后，当我单击每个用户时，它应该显示名称。
所以我用了表演和表演。
当我尝试在浏览器中打印值时，我看不到它。return(<div>{show}users Data{setShow}
我为每个用户写了click，但是我不确定如何隐藏和显示。
我的应用程序中将有数百万个用户，所以当我单击每个用户时，隐藏和显示名称的最佳方法是什么
在下面提供我的代码段和沙箱

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

useState钩子就像类组件的state和setState一样。在您的情况下，show是具有true或false值的状态变量，您可以使用函数setShow更改此值。

要有条件地显示用户名，应使用show的值，如下所示：

return(
  <div>
    <div onClick={() => setShow(true)}>user1</div>
    {show && <div>John</div>}
    <div onClick={() => setShow(true)}>user2</div>
    {show && <div>Mike</div>}
  </div>
)

但是，我认为这不是您想要的。听起来好像您只想显示被单击的用户名，在当前状态下，当您单击一个用户时，将显示所有用户名，因为它们都依赖于相同的状态变量show。

您应该创建一个单独的组件，其中包含显示和隐藏用户名的逻辑，并将每个用户映射到该组件。这样，每个用户都有自己的show状态。

编辑：

我已使用以下内容更新了您的代码：

// each user gets mapped to this component
const UserItem = ({user}) => {
  // that means each user has their own 'isNameShown' variable
  const [isNameShown, setIsNameShown] = useState(false)

  return (
    // if you click this div, this user's isNameShown value will be set to true
    <div onClick={() => setIsNameShown(true)}>
      // user.id is the id of the user from props
      <div>{user.id}</div>
      // only show this user's name if this user's isNameShown is true
      {isNameShown && <div>{user.name}</div>}
    </div>
  )
}

function DataClick(){

  // we just create some example users here for testing
  const users = [
    {
      id: 'user1',
      name: 'John',
    },
    {
      id: 'user2',
      name: 'Peter',
    },
  ]

  return(
    <div>
      // map each user to a UserItem, passing the user as a prop
      {users.map(user => <UserItem user={user} />)}
    </div>
  )
}

我不知道您的users数据结构是什么样子，因此您应该相应地对其进行更改。

这里要学习的是，如果发现自己一遍又一遍地重复代码或一次又一次地复制粘贴内容，那么通常会有更好的方法来实现所需的目标。您的用户列表基本上是一遍又一遍地复制和粘贴的，因此您应该创建一个UserItem组件。

此代码可能存在问题，即一旦看到用户名，您就无法再次隐藏它，但是如果您打算这样做，我将让您找出如何执行此操作。

Answer 2

@computer很酷，请单击下面的实现以在单击用户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挂钩返回的任何函数都可以通过以下方式编写。

第一种方法示例：

setIsNameShown(false)

在这种情况下，您将直接传递要设置的值，而与先前的值无关。

第二种方式示例：

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

或更简洁地说，可以将其写为

setIsNameShown(prevStateVariable => !prevStateVariable)

在这种情况下，函数setIsNameShown接受回调函数，该回调函数将先前状态（与该函数相关的状态）作为参数接收。因此，在需要将值设置为state的情况下，该值取决于先前的状态值，请使用回调函数，而不要直接提供该值。

使用react钩子隐藏和显示名称

2 个答案: