import React from 'react';
import './componentStyle.css';
function CheckList(props) {
    return <div className="checkoutList">
        <form>
            <div>
                <label htmlFor="name">Food</label>
                <input type="text" readOnly id='name' value={props.food}></input>
            </div>
            <div>
                <label htmlFor="price">Price</label>
                <input type="number" readOnly id='price' value={props.price}></input>
            </div>
            <div>
                <label htmlFor="quantity">Quantity</label>
                <input type="number" readOnly id='quantity' value={props.quant}></input>
            </div>
            <div>
                <label htmlFor="total">Total</label>
                <input type="number" readOnly id='total' value={props.total}></input>
            </div>
            
        </form>
        <button style={{
            cursor:"pointer"
        }} onClick={}  type='button'>Remove</button>
    </div>;
}

export default CheckList;

我的签出.js

import React from 'react';
import {useState, useEffect} from 'react';
import CheckList from '../components/CheckList';
import Data from '../data.json';
import OrderBtn from '../components/TrayOrderBtn';

function Checkout(props) {
  const foodItem = (
    Data.myTray.map((item) => <CheckList id={item[Math.random().toString().slice(2)]} key={item.id} food={item['food']} price={item['price']} quant={item['quantity']} />)
  )

 
  var [widget, setWidget] = useState(Data.myTray);

  const removeFood=(item)=> {
    widget.filter((w) => w.id !== item.id)
    
  }
  console.log(widget)
 

  useEffect(() => {
    setWidget(Data.myTray)
  },[widget])
  
  if (Data.myTray.length <= 0) {
    return <div>
      <h1>Add a Food Item to Your Tray</h1>
    </div>
  }else {
    return <div className="checkout">
      {widget.map(
        (item) => <CheckList  key={item.id} food={item['food']} price={item['price']} quant={item['quantity']} />
      )}
      <OrderBtn />
    </div>;
  }
  
}

export default Checkout;

推荐答案

查看以下示例-

假设您有一个组件签出，并且您希望将删除函数传递给Checklist组件，以便可以在Checklist组件中应用事件侦听器。

Here we are passing our delete function as a prop to Checklist component

注意：-这只是一个如何实现的示例。

查看我们的Checkout组件

export default function Checkout(){

const handleDelete=(data)=>{
console.log(data);
}

return(
<Checklist handleDelete={handleDelete}/>
)

}

查看我们的清单组件

export default function Checklist(props){

return(
<button onclick={()=>props.handleDelete("your target id or anything")}>Delete</button>
)
}