Question

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

代码如下：


 var item = locStore[locStore.length-1];
 var cartRowContents = 
        `<div class="cart-item cart-column">
            <img class="cart-item-image" src="${item.image}" width="100" height="100">
            <span class="cart-item-title">${item.title}</span>
            <span class="cart-item-size">"Rs.${item.sizePrice}"</span>
        </div>
        <span class="cart-price cart-column">${item.price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`;

Answer 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 周围并使用 showButton 钩子将 true 的值作为 useState 传递

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

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

然后像这样在您的Button的{{1}}中使用它

ParentComponent

Answer 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>
)}

Answer 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

Answer 4

由于 Button 是在地图中呈现的，因此您可以从现有按钮创建自定义按钮组件来管理 hide 状态并返回实际的 Button 或 {{1 }}。

自定义按钮应如下所示：

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

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

4 个答案: