React communication problem from child to parent(反应孩子与父母的沟通问题)
本文介绍了反应孩子与父母的沟通问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在构建一个猜谜游戏,其中问题和选择逻辑位于名为 Questions 的组件中.我无法让 App 读取问题代码.我希望 App 中的状态根据子组件中的选择进行更新.
我一直在尝试从 如何在 ReactJS 中将数据从子组件传递到其父组件? 和 https://malithjayaweera.com/2018/01/reactjs-passing-data-react-components/,但我不清楚如何将它应用到我的项目中.
应用程序:
import React, { Component } from 'react';导入'./App.css';从./Timer"导入定时器;从./Questions/Questions.js"导入问题;从../src/Results"导入结果;类应用扩展组件{状态 = {总真:0,完全错误:0,}组件DidMount() {console.log(`TotalTrue: ${this.state.totalTrue}`);console.log(`TotalFalse: ${this.state.totalFalse}`);}//提交按钮处理表单提交 = 事件 =>{event.preventDefault();console.log("点击提交按钮");};callbackHandlerFunction = (selectedOption) =>{this.setState({ selectedOption });}使成为() {返回 (<div className="视差"><div className="App"><div className="包装器"><div className="headerDiv"><h1>皮克斯琐事!</h1></div><div className="timerDiv"><定时器/></div><div className="questionSection"><问题handleClickInParent={this.callbackHandlerFunction}/></div><button onClick={this.handleFormSubmit}>提交</button></div>{/* this.state.articles.length >0&&...*
沃梦达教程
本文标题为:反应孩子与父母的沟通问题


基础教程推荐
猜你喜欢
- 直接将值设置为滑块 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01