如何使特定按钮在 React.js 上永久消失？

Posted 2023-02-23

【中文标题】如何使特定按钮在 React.js 上永久消失？

【英文标题】：How to make a specific button disappear permanently on React.js?

【发布时间】：2021-06-30 20:17:30

【问题描述】：

我试图让一个按钮在点击后消失，这样即使我转到不同的组件（不同的页面）它也会保持这种状态。

代码如下：

<Button
  className="but"
  variant="primary"
  onClick=(e) => 
    const tr = 
      id: info.track.track_id,
      trackName: info.track.track_name,
      artistName: info.track.artist_name,
    ;

    fetch('http://localhost:8000/blogs', 
      method: 'POST',
      headers:  'Content-Type': 'application/json' ,
      body: JSON.stringify(tr),
    ).then(() => 
      console.log('blog added');
    );
  
  style= marginLeft: '6px' 
>
  Mark
</Button>;

【参考方案1】：

您需要在全局状态下管理button 的显示或从按钮的父组件处理它。

像这样：

import React,  useState  from 'react';

const ParentComponent = () => 
  const [showButton, setShowButton] = useState(false);

  return (
    <>
      showButton && (
        <Button
          className="but"
          variant="primary"
          onClick=(e) => 
            const tr = 
              id: info.track.track_id,
              trackName: info.track.track_name,
              artistName: info.track.artist_name,
            ;

            fetch('http://localhost:8000/blogs', 
              method: 'POST',
              headers:  'Content-Type': 'application/json' ,
              body: JSON.stringify(tr),
            ).then(() => 
              console.log('blog added');
              setShowButton(false)
            );
          
          style= marginLeft: '6px' 
        >
          Mark
        </Button>
      )
    </>
  );
;

要在全局级别管理状态，您可以使用 React.Context API

首先，像这样在您的根应用中创建 ButtonContext

const ButtonContext = React.createContext(
  showButton: true,
  setShowButton: (show) => 
);

将它包裹在你的根 App 周围，并使用 useState 钩子将 showButton 的值作为 true 传递

const [showButton, setShowButton] = useState(true);

<ButtonContext.Provider value= showButton, setShowButton >
  <App />
</ButtonContext.Provider>

然后像这样在您的Button 的ParentComponent 中使用它

import React,  useContext  from 'react';

const ParentComponent = () => 
  const showButton, setShowButton = useContext(ButtonContext);

  return (
    <>
      showButton && (
        <Button
          onClick=() => 
            // do your click stuff and
            // reset the showButton context value
            setShowButton(false)
           
          
        >
        </Button>)
    </>
  )

【讨论】：

按钮位于地图内，因此有多个按钮。因此，您的答案将影响所有按钮，而不是单击的按钮。对吗？

如果它在地图中并且您只想隐藏单击的按钮，那么它是不同的实现。

如果您正在寻找，我可以更新我的答案吗？

同时分享更多调用按钮的父组件代码

我刚刚发布了一个与此不同的新答案。检查一下，让我知道它是否有效？

【参考方案2】：

use 可以使用 state 来隐藏按钮之类的东西

 showButton && (
   < Button className="but" variant="primary" onClick=(e)=>
const tr=id:info.track.track_id,trackName:info.track.track_name,artistName:info.track.artist_name

fetch('http://localhost:8000/blogs',
 method:'POST',
 headers: "Content-Type": "application/json",
 body: JSON.stringify(tr)
  ).then(()=>
  console.log("blog added");
    setShowButton(false);
 );
             style= marginLeft:"6px" >Mark</Button>
)

【讨论】：

我已经尝试过了，但它隐藏了所有按钮。

嗯，也许可以尝试添加一个 css 类进行显示：无；到需要隐藏的特定按钮，然后在需要切换它们时切换类？您如何知道地图中哪些按钮需要显示，哪些不需要？

我有多张卡片，每张卡片都有一个按钮，如果我点击按钮，卡片就会进入收藏列表。明白了吗？

【参考方案3】：

如果您想为用户永久隐藏它，那么您必须在后端某处注册该用户活动。然后发送一个 http 请求，这样您就可以获取数据，如果用户可以再次执行该活动。根据您设置某些状态的响应，然后您可以从该状态隐藏/显示按钮。

import React,  useEffect, useState  from 'react'

const App = () => 
  const [showButton, setShowButton] = useState(false);

  useEffect(() => 
    fetch('http://localhost:8000/can-user-perform-activity-again')
      .then((response) => response.json())
      .then((response) => 
        if(response.yes)
          setShowButton(true)
         
        if(response.no)
          setShowButton(false);
        
      )
  , []);

  return (
    <div>
      showButton && <button>Vote</button>
    </div>
  )


export default App

【讨论】：

按钮位于地图内，因此有多个按钮。如何设置状态以便识别特定按钮？？

这些按钮是干什么用的？

我有多张卡片，每张卡片都有一个按钮，如果我点击按钮，卡片就会进入收藏列表。明白了吗？

【参考方案4】：

由于Button 在地图中呈现，您可以从现有按钮创建一个自定义按钮组件，用于管理hide 状态并返回实际的Button 或null。

自定义按钮应如下所示：

const CustomButton = ( info ) => 
  const [hide, setHide] = useState(false);

  return hide ? (
    <Button
      className="but"
      variant="primary"
      onClick=(e) => 
        const tr = 
          id: info.track.track_id,
          trackName: info.track.track_name,
          artistName: info.track.artist_name,
        ;

        fetch('http://localhost:8000/blogs', 
          method: 'POST',
          headers:  'Content-Type': 'application/json' ,
          body: JSON.stringify(tr),
        ).then(() => 
          console.log('blog added');
          setHide(false);
        );
      
      style= marginLeft: '6px' 
    >
      Mark
    </Button>
  ) : null;
;

您可以在您的.map() 中使用它并将info 作为props 传递给它。

像这样：

data.map((info) => (
  <CustomButton
    key=info.track.track_id
    info=info
  />)
)

【讨论】：

有点用，但是当我转到不同的页面时，按钮又回来了

然后使用React.Context API 来全局管理状态，这样当您导航到不同的组件时，它就不会返回。检查我的其他答案以了解如何做到这一点。