如何通过另一个组件中的道具访问功能

Question

我有两个组件 Checkout.js 和 Checklist.js 我已经设法将数据从清单中传递到结帐，但我有一个功能可以从结帐中删除项目，但我不知道如何通过道具访问它。我如何访问结帐组件中的 removeFood 函数我的清单 .js

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;

我的checkout.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;

Answer 1

看看下面的例子-

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

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

注意：-这只是一个实施示例。

查看我们的结帐组件

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

Answer 2

这是一个最小的可重现示例。 add 和 remove 函数在 App 中定义，并相应地传递给子组件 Products 和 Checkout。运行代码，然后点击一些 胡萝卜 和 香蕉 进入您的购物车。然后点击❌删除一些。

function App() {
  const [cart, setCart] = React.useState([])
  const add = item => e =>
    setCart([...cart, item])
  const remove = index => e =>
    setCart([...cart.slice(0, index), ...cart.slice(index+1)])
  return <div>
    <Products add={add} />
    <Checkout cart={cart} remove={remove} />
  </div>
}

function Products({ add }) {
  const PRODUCTS = ["apple", "banana", "carrot"]
  return <div className="products">
    {PRODUCTS.map((p, key) =>
      <button key={key} type="button" onClick={add(p)} children={p} />
    )}
  </div>
}

function Checkout({ cart, remove }) {
  return <div className="checkout">
    {cart.map((c, key) =>
      <div>{c} <button type="button" onClick={remove(key)} children="❌"/></div>
    )}
  </div>
}

ReactDOM.render(<App/>, document.querySelector("#app"))

.products, .checkout { display: flex; flex-direction: flex-row; flex-wrap: wrap; }
.products > button { padding: 0.5rem; margin: 0.5rem; }
.checkout > div { background-color: #CDECFF; padding: 0.5rem; margin: 0.5rem; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

有关更多示例，请参阅 React 文档中的 Lifting State Up。

如何通过另一个组件中的道具访问功能

How Can I access a function through props in another component

reactjs

react-props