使用 UseState React Hook 从子组件更新父组件状态 [英] Updating Parent Component State from Child Component with UseState React Hook

查看：61
本文介绍了使用 UseState React Hook 从子组件更新父组件状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有一个这样的父组件:

function Recipe(recipe) {const [pageState, updatePageState] = useState("view");返回 (<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">
updatePageState(state)}/>

)}

并且我在下面有一个子组件，我正在尝试更新父组件中的 pageState .我已经尝试了几次迭代，但都没有成功.

function RecipeActions(pageState, {triggerParentUpdate}){const [open, moreActions] = useState(false);功能编辑食谱(){触发父更新(页面状态)；}返回(<div className="flex"><span className={`${pageState=='view' ?'隐藏':''} ml-1 sm:ml-2 md:ml-1 lg:ml-2 shadow-sm rounded-md`}><按钮onClick={editRecipe}类型=按钮"className="inline-flex items-center px-3 sm:px-4 py-2 border border-gray-300 text-smleading-5 font-medium rounded-md text-gray-700 bg-white hover:text-灰色 500 焦点:轮廓无焦点:阴影轮廓蓝色焦点:边界蓝色300 活动:文本灰色800 活动:bg-灰色50 活动:文本灰色800 过渡持续时间-150 缓入-出去"><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"/><路径填充规则=偶数"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"剪辑规则=偶数"/></svg><p className="hidden sm:block sm:pl-2 md:hidden lg:block">编辑</p></span>

)}

解决方案

我想通了.请参阅下面的摘要:

重要的部分是确保你的 props 作为单个数组传递给你的孩子，你应该在调用你的函数时有一个函数(例如 onClick={() => triggerParentUpdate('edit')})，并且在将更新函数从父级传递给子级时，您需要这样的内容 <RecipeActions pageState = {pageState} triggerParentUpdate = {updatePageState}/>

家长

function Recipe(recipe) {const [pageState, setPageState] = useState("view");const updatePageState = (state) =>{设置页面状态(状态)；}返回 (<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">

)}

孩子

function RecipeActions({pageState, triggerParentUpdate}){const [open, moreActions] = useState(false);返回(<div className="flex"><span className={`${pageState=='view' ?'隐藏':''} ml-1 sm:ml-2 md:ml-1 lg:ml-2 shadow-sm rounded-md`}><按钮onClick={() =>triggerParentUpdate('edit')}类型=按钮"className="inline-flex items-center px-3 sm:px-4 py-2 border border-gray-300 text-smleading-5 font-medium rounded-md text-gray-700 bg-white hover:text-灰色 500 焦点:轮廓无焦点:阴影轮廓蓝色焦点:边界蓝色300 活动:文本灰色800 活动:bg-灰色50 活动:文本灰色800 过渡持续时间-150 缓入-出去"><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"/><路径填充规则=偶数"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"剪辑规则=偶数"/></svg><p className="hidden sm:block sm:pl-2 md:hidden lg:block">编辑</p></span>
)}

这是我从这个页面

看到的另一个例子

从'react'导入React；功能应用(){const [水果，setFruits] = React.useState([{ id: '1', name: 'Apple', isFavorite: false },{ id: '2', name: 'Peach', isFavorite: true },{ id: '3', name: 'Strawberry', isFavorite: false },]);函数句柄点击(项目){const newFruits = Fruits.map((fruit) => {if (fruit.id === item.id) {返回 {id:fruit.id，名称:fruit.name,isFavorite: !fruit.isFavorite,};} 别的 {回果；}});设置水果(新水果)；}返回 (<div><h3>没有样式</h3><Basket items={fruits} onClick={handleClick}/>
);}function Basket({ items, onClick }) {返回 (<ul>{items.map((item) => (<li key={item.id}>{项目名称}<button type="button" onClick={() =>onClick(item)}>{item.isFavorite ?'不喜欢':'喜欢'}))});}导出默认应用程序；

Say I have a parent component like this:

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

and I have a child component below where I am trying to update pageState in the parent component. I've tried several iterations with no luck.

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

  function editRecipe(){
    triggerParentUpdate(pageState);
  }

  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={editRecipe}
        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>
  )
}

解决方案

I figured it out. See below for a summary:

The important pieces are to make sure that your props are being passed into your child as a single array, you should have a function when calling your function (e.g. onClick={() => triggerParentUpdate('edit')}), and when passing your update function to the child from the parent, you need something like this <RecipeActions pageState = {pageState} triggerParentUpdate = {updatePageState} />

Parent

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

Child

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

and here is another example I saw from this page

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;

这篇关于使用 UseState React Hook 从子组件更新父组件状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆