React js从父组件更改子组件的状态

2023-12-07

我有两个组件:父组件我想从中更改子组件的状态:

class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <ChildComponent />
      </div>
    );
  }
}

And 子组件:

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

我需要更改子组件的open来自父组件的状态,或调用子组件的切换菜单()单击父组件中的按钮时来自父组件?


状态应该在父组件中管理。您可以转移open通过添加属性来给子组件赋值。

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React js从父组件更改子组件的状态 的相关文章

  • Vue 3 Composition API 提供/注入在单文件组件中不起作用

    我正在使用 Composition API 在 VueJS 3 中创建一个库 我实现了提供 注入 如中所述docs https v3 vuejs org guide composition api provide inject html i
  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • 从 React Native Js 代码调用 Android Native UI 组件方法

    我创建了一个 CustomView SignatureView java 它扩展了 LinearLayout 以捕获 Android Native 中的签名 并创建了SignatureCapturePackage java和Signatur
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

随机推荐

  • stable_partition 如何成为自适应算法?

    stable partition是c STL算法头文件中的函数模板 我读到它是一种自适应算法 其时间复杂度为 O n logn 或 O n 具体取决于某些因素 有人可以解释一下这些因素是什么以及时间复杂度如何取决于这些因素 谢谢 有2 实施
  • JS文本区域大小写改为小写

    如何将文本框 文本区域中的字符大小写更改为小写 onchange p Here are my text entry objects p
  • 为什么 checkout -f 是放入 post-receive 挂钩中的正确选择?

    我在 Dreamhost 上有一个帐户 他们有关于使用 Git 跟踪自定义 WordPress 主题中的文件的说明 他们的指示 在 https help dreamhost com hc en us articles 227816388 U
  • java中bmp转jpg

    Java中如何将bmp转换为jpg 我知道如何使用ImageIO但有没有更快或更好的方法呢 这是我在网上找到的 ImageIO 方法 Create file for the source File input new File c temp
  • 使用 Python 解析 XML SOAP 响应

    我想从 SOAP 解析此响应并提取之间的文本
  • 蝙蝠游戏。使用 set /p 添加计时器

    我正在制作一个 bat 游戏 目前输入命令时的代码是 set p command 我想知道的是你是否可以以某种方式限制输入命令的时间 例如 如果你与守卫战斗 并且你在 5 秒内没有发出命令 守卫就会攻击 这并不是迫切需要的 我只是想更多地了
  • 动态分割图像

    有谁知道 PHP 例程 我可以将原始图像分成两半以创建两个新图像 A 和 B 见下文 替代文本 http www bellschofield eu zqocc89c jpg Thanks
  • GGTS (Eclipse) 和 JAVA 1.8 中的 JVM 不兼容

    由于升级到 Java 1 8 在 GGTS eclipse 中运行 grails 应用程序时出现一些问题 堆栈开始于 Mar 05 2015 3 51 31 PM org springsource loaded jvm JVM copyMe
  • 尝试上传大文件时出现异常

    我正在为我的服务使用 wshttpbinding
  • 在 C 中,当 'a' 是 int 时,为什么 sizeof(char) 是 1?

    I tried printf d d n sizeof char sizeof c and got 1 4作为输出 如果字符大小为 1 为什么 c 给我4个 我猜这是因为它是一个整数 所以当我这样做时char ch c 当将 4 字节值分配
  • 在 iOS 中,使用 CFUUID 生成的 id 有多唯一?

    其实标题就是我的问题 既然 Apple 不再允许使用 UUID 我决定使用 CFUUID 不过我对此有一些疑问 每个设备都是唯一的吗 如果是 它与 UUID 有什么不同 它是随机生成器吗 如果是的话有多好 我能确定 10000 台设备中不会
  • 我的 cookie 真的只是 HTTP 吗? Cookie 请求标头中缺少标志

    我做了一些配置 最终 仅在 HTTP 上设置我的 cookie 似乎 有效 我试过了postman我有以下内容 当我点击登录页面时 在 cookies 部分 我的名为 JSESSIONID 的 cookie 似乎只是 HTTP 它有检查 当
  • 使用MySQL,如何选择某一特定行的查询结果排名?

    今天我花了很多时间尝试各种事情 但似乎都不起作用 这是我的情况 我希望能够根据特定排序行中的 ID 选择行的排名 例如 如果我的查询类似于 SELECT id name FROM people ORDER BY name ASC 结果如下
  • Emgu - CalcHist _rowRange 错误

    我正在尝试使用 OpenCV 的 Emgu C 包装器为图像的反向投影创建直方图 我有以下 OpenCV C 代码 我试图将其转换为 Emgu C char filename char C Images items jpg Mat im i
  • JSF PRG 存在验证错误

    我正在使用带有 PRG 模式的 JSF 在我的导航规则中使用 问题是当我收到验证错误时 例如 用户未设置强制值 重定向未完成 即发布后紧接着获取同一页面 场景是 用户没有输入必填值并提交表单 发生验证错误 并且显示相同视图时出现错误 消息
  • 如何在 ASP.Net MVC 中初始化 Webhook 接收器

    我正在遵循本指南here用于在 ASP Net MVC 中安装和使用 webhook 但看起来本指南适用于 wep api 类型项目 我正在使用 MVC 类型的项目 并且没有 Register 方法 这与 API 项目不同 在 MVC 中
  • 相当于Angular2中的ng-repeat来获取JSON对象的键[重复]

    这个问题在这里已经有答案了 我正在寻找一种使用 Angular2 将 JSON 对象浏览到 HTML 页面的方法 为了得到每个键和每个值 在 AngularJS 中 可以使用指令ng repeat div key div 但在 Angula
  • 如何使用 SharpSVN 访问预提交挂钩中的文件信息

    总的来说 我对 SharpSVN 和 SVN 很陌生 我正在尝试实现一个预提交挂钩 当用户提交某种类型的 XML 文件时 在允许提交文件之前 我需要拦截该文件并对其进行分析 以确保它们包含某些元素 由于 SVN 似乎提交了两个参数 存储库路
  • 获取具有特定时间的 Date() 对象

    我想获取一周的开始日期 我能够获取日期 只是返回的日期具有当前系统时间的时间 例如 如果现在是 19 20 我得到的周开始日期为日期 2012 年 3 月 26 日星期一 19 20 16 GMT 0530 IST 为了准确计算 我需要时间
  • React js从父组件更改子组件的状态

    我有两个组件 父组件我想从中更改子组件的状态 class ParentComponent extends Component toggleChildMenu render return div div