Reactjs 使用UseState React挂钩从子组件更新父组件状态

假设我有这样一个父组件：

function Recipe(recipe) {
  const [pageState, updatePageState] = useState("view");

  return (
    <div className="border-b-2 border-gray-300 py-2">
      <div className="h-full flex-col md:flex md:flex-row md:justify-between md:items-start">
        <div
          className="order-2 flex flex-col flex-1 px-2 h-full md:h-72 lg:h-64 md:flex-col md:justify-between md:order-1 md:w-1/2 lg:w-3/4"
        >          
          <RecipeActions pageState = {pageState} triggerParentUpdate = {state => updatePageState(state)} />
        </div>
      </div>
    </div>
  )
}

---

我想出来了。有关摘要，请参见下文：

重要的一点是确保道具作为单个数组传递给孩子，在调用函数时应该有一个函数（例如，

onClick={（）=>triggerpentupdate（'edit'）}

），在将更新函数从家长传递给孩子时，需要这样的函数

母公司

function Recipe(recipe) {
  const [pageState, setPageState] = useState("view");

  const updatePageState = (state) => {
    setPageState(state);
  } 

  return (
    <div className="border-b-2 border-gray-300 py-2">
      <div className="h-full flex-col md:flex md:flex-row md:justify-between md:items-start">
        <div
          className="order-2 flex flex-col flex-1 px-2 h-full md:h-72 lg:h-64 md:flex-col md:justify-between md:order-1 md:w-1/2 lg:w-3/4"
        >          
          <RecipeActions pageState = {pageState} triggerParentUpdate = {updatePageState} />
        </div>
      </div>
    </div>
  )
}

函数配方（配方）{
const[pageState，setPageState]=useState（“视图”）；
const updatePageState=（状态）=>{
设置页面状态（状态）；
} 
返回(
)
}

孩子

函数RecipeActions（{pageState，triggerParentUpdate}）{
const[open，moreActions]=useState（false）；
返回(
triggerParentUpdate（'edit'）}
type=“按钮”
className=“内联flex项目中心px-3 sm:px-4 py-2边框边框-gray-300文本sm前导-5字体中圆角md文本-gray-700背景白色悬停：文本-gray-500焦点：轮廓无焦点：阴影轮廓蓝色焦点：边框-blue-300激活：文本-gray-800激活：bg-gray-50激活：文本-gray-800转换持续时间-150缓进-缓出”
>
编辑

)
}

这是我从中看到的另一个例子

从“React”导入React；
函数App（）{
const[fruits，setFruits]=React.useState([
{id:'1'，name:'Apple'，isFavorite:false}，
{id:'2'，name:'Peach'，isFavorite:true}，
{id:'3'，name:'草莓'，isFavorite:false}，
]);
功能手柄点击（项目）{
const newFruits=fruits.map（（fruit）=>{
if（fruit.id==item.id）{
返回{
id:fruit.id，
名称：fruit.name，
isFavorite:！水果。isFavorite，
};
}否则{
还果；
}
});
刚果（新果）；
}
返回(
没有样式
);
}
函数篮（{items，onClick}）{
返回(

{items.map（（item）=>(

{item.name}
onClick（项目）}>
{item.isFavorite？'不像'：'像'}

))}

);
}
导出默认应用程序；

谢谢，这非常有用，我一直在找这个！

function Recipe(recipe) {
  const [pageState, setPageState] = useState("view");

  const updatePageState = (state) => {
    setPageState(state);
  } 

  return (
    <div className="border-b-2 border-gray-300 py-2">
      <div className="h-full flex-col md:flex md:flex-row md:justify-between md:items-start">
        <div
          className="order-2 flex flex-col flex-1 px-2 h-full md:h-72 lg:h-64 md:flex-col md:justify-between md:order-1 md:w-1/2 lg:w-3/4"
        >          
          <RecipeActions pageState = {pageState} triggerParentUpdate = {updatePageState} />
        </div>
      </div>
    </div>
  )
}

function RecipeActions({pageState, triggerParentUpdate}){
  const [open, moreActions] = useState(false);

  return(
    <div className="flex">
    <span className={`${pageState=='view' ? 'hidden' : ''} ml-1 sm:ml-2 md:ml-1 lg:ml-2 shadow-sm rounded-md`}>
      <button
        onClick={() => triggerParentUpdate('edit')}
        type="button"
        className="inline-flex items-center px-3 sm:px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out"
      >
        <svg className="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
          <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
          <path
            fillRule="evenodd"
            d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
            clipRule="evenodd"
          />
        </svg>
        <p className="hidden sm:block sm:pl-2 md:hidden lg:block">Edit</p>
      </button>
    </span>
  </div>
  )
}

import React from 'react';

function App() {
  const [fruits, setFruits] = React.useState([
    { id: '1', name: 'Apple', isFavorite: false },
    { id: '2', name: 'Peach', isFavorite: true },
    { id: '3', name: 'Strawberry', isFavorite: false },
  ]);

  function handleClick(item) {
    const newFruits = fruits.map((fruit) => {
      if (fruit.id === item.id) {
        return {
          id: fruit.id,
          name: fruit.name,
          isFavorite: !fruit.isFavorite,
        };
      } else {
        return fruit;
      }
    });

    setFruits(newFruits);
  }

  return (
    <div>
      <h3>with no styling</h3>

      <Basket items={fruits} onClick={handleClick} />
    </div>
  );
}

function Basket({ items, onClick }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}
          <button type="button" onClick={() => onClick(item)}>
            {item.isFavorite ? 'Unlike' : 'Like'}
          </button>
        </li>
      ))}
    </ul>
  );
}

export default App;