如果我单击按钮然后在 reactJs 中显示此按钮 ID

Question

我创建了一个 onclick 函数 const showContent=(id)=>{}，如果我单击特定按钮，它们将在 const showContent = (id)=>{console.log(id)} 中显示 id，就像这样......

在这里面Cart.jsx 我使用地图方法渲染 CartStyle.jsx 所以这个删除按钮在里面。

购物车

function Cart() {
  const [data, setData] = useState([])
  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('Cart'));
    data.map(async (v) => {
      try {
        axios.get(`/cart/${v}`)
          .then((res) => {
            return setData((preV) => {
              return [...preV, res.data]
            })
          })
          .catch(e => { console.log(e) })
      } catch (e) {
        console.log(e);
      }
    })
  }, [])
  
  const showContent=(id)=>{
    console.log('this is id', id)
  }
  return (
    <>
      <div className=" cartStyle row g-3">
        <div className="left col-md-4">         
            <button className="btn btn-primary">Proceed to Buy</button>
          </div>
        </div>
        <div className="right col-md-8 flex flex-wrap justify-around">

          {
            data.map((v, i) => {
              return <CartStyle
                key={i}
                id={i}
                title={v.title}
                price={v.DiscountPrice}
                img={v.image}
                delete={showContent(i)}
              />
            })

          }
        </div>
      </div>
    </>
  )
}


export { Profile, Cart };

CartStyle 这是一个 CartStyle 意味着我正在使用 props

将数据从 Cart.jsx 传递到 CarStyle.jsx

const CartStyle= (props) => {
return (
  <>
    <div style={{ width: '22em', height: '10em'}} className=" p-2 row g-3 card container rounded-2xl shadow py-2 my-3">
        <button id="delBtn" onClick={props.delete} className="btn btn-primary my-2">Delete</button>
      </div>
    </div>
  </>
)
};

export default CartStyle;

Answer 1

您需要将函数分配给 delete prop 而不是直接调用它。

替换

<CartStyle
  delete={showContent(i)}
  />

和

<CartStyle
 delete={() => showContent(i)}
 />

Answer 2

<CartStyle
  key={i}
  id={i}
  title={v.title}
  price={v.DiscountPrice}
  img={v.image}
  delete={(i) => showContent(i)} // or delete={showContent}
/>

// CartStyle
<button id="delBtn" onClick={() => props.delete(props.id)} className="btn btn-primary my-2">Delete</button>

Answer 3

你将你的 id 传递给你的父组件 compoenent.Then 你在你的子组件中获取 id 作为道具。

 const CartStyle= (props) => {
  return (
   <>
   <div style={{ width: '22em', height: '10em'}} className=" p-2 row g-3 
     card container rounded-2xl shadow py-2 my-3">
        <button id="delBtn" onClick={() => props.delete(props.id)} 
         className="btn btn-primary my-2">Delete</button>
   </div>
  </>
 )
};

export default CartStyle

如果我单击按钮然后在 reactJs 中显示此按钮 ID

if i click button then show this button id in reactJs

javascript

function

reactjs

mern