javascript 如何在reactjs中单击按钮时使用useState有条件地显示和隐藏元素

5anewei6 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(199)

目前我是MERN的新手，我想在用户单击列表中的P按钮后显示按钮。
For Example like this
但问题是点击p后，present显示，但present显示在所有列表中，我想只在我点击的地方显示present按钮。p和A应该隐藏
这是可能的吗？我怎么做更正在这个代码
我的代码

import React, { useEffect, useState } from 'react'

const Contracter = () => {

    const [ispresentVisible, setIspresentVisible] = useState(false);
  

    return (
        <>
        <ol class="list-group list-group-numbered mt-4 ">

                                            {
                                                smember.map((item, i) => (

                                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                                        <div class="ms-2 me-auto">

                                                            <NavLink onClick={() => { getmemberid(item.PM_id) }} className="text-decoration-none"><div class="fw-bold">{item.member}</div></NavLink>

                                                        </div>
                                                        <button data-value1={"present"} data-value2={"1"} onClick={(e) =>{  setIspresentVisible(!ispresentVisible) }} className='btn btn-success me-3'>P</button>
                                                        <button data-value1={"absent"} data-value2={"0"} onClick={(e) => { tomakeabsent(e, item.PM_id, item.project_id) }} className='btn btn-danger '>A</button>
                                                        {
                                                            ispresentVisible &&
                                                            <button className='btn btn-success ms-2'>Present</button>
                                                        }
                                                        
                                                    </li>
                                                ))
                                            }
                                        </ol>
        </>
    )
}

export default Contracter

谢谢
。
我尝试了上面的代码，我希望在单击P按钮后显示当前按钮

JavaScript

来源：https://stackoverflow.com/questions/75258060/how-to-conditionally-show-and-hide-the-element-using-you-usestate-on-button-clic

2条答案

按热度按时间

xlpyo6sf1#

你应该使用ispresentVisible状态下的数组，就像下面的I一样，并使用present state作为学生索引的数组。或者你可以使用item.id而不是索引i

import React, { useEffect, useState } from 'react'

const Contracter = () => {

const [present, setPresent] = useState([]);

return (
    <>
    <ol class="list-group list-group-numbered mt-4 ">

                                        {
                                            smember.map((item, i) => (

                                                <li class="list-group-item d-flex justify-content-between align-items-start">
                                                    <div class="ms-2 me-auto">

                                                        <NavLink onClick={() => { getmemberid(item.PM_id) }} className="text-decoration-none"><div class="fw-bold">{item.member}</div></NavLink>

                                                    </div>
                                                    <button data-value1={"present"} data-value2={"1"} onClick={(e) =>{  setPresent(prev=>[...prev, i]) }} className='btn btn-success me-3'>P</button>
                                                    <button data-value1={"absent"} data-value2={"0"} onClick={(e) => { tomakeabsent(e, item.PM_id, item.project_id) }} className='btn btn-danger '>A</button>
                                                    {
                                                        present.includes(i) &&
                                                        <button className='btn btn-success ms-2'>Present</button>
                                                    }
                                                    
                                                </li>
                                            ))

                                          }
                                        </ol>
        </>
    )
  }

   export default Contracter

赞(0）回复(0）举报 2023-01-29

gg0vcinb2#

您将需要一个Map来定义每个组件状态这里是一个易于理解的示例阅读它并解决您的问题：

function App() {

  const [visibleStore, dispatchVisibleStore] = useState(() => new Map<string, boolean>())

  return (
    <ol>

      {
        [1, 2, 3, 4].map(item => {
          if (visibleStore.get(item + '') === false) return undefined
          return (
            <li key={item}>
              {item}
              <button
                onClick={() => dispatchVisibleStore(new Map(visibleStore.set(item + "", false)))}
              >hide</button>
            </li>
          )
        })
      }
    </ol>
  )
}

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 如何在reactjs中单击按钮时使用useState有条件地显示和隐藏元素

2条答案

相关问题

热门标签

最新问答