如何向具有同级事件的父组件添加子组件？
在React中，向具有同级事件的父组件添加子组件可以通过以下步骤实现：
- 在父组件中定义一个状态（state），用于存储子组件的数据或控制子组件的显示与隐藏。
- 在父组件的render方法中，将子组件作为父组件的子元素进行渲染。
- 在父组件中定义一个方法，用于处理子组件触发的事件，并更新父组件的状态。
- 将该方法作为props传递给子组件，以便子组件能够调用该方法。
- 在子组件中，通过props获取父组件传递的方法，并在需要的时候调用该方法。
下面是一个示例代码：
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [showChild, setShowChild] = useState(false);
const handleChildEvent = () => {
// 处理子组件触发的事件
// 更新父组件的状态
setShowChild(true);
};
return (
<div>
<button onClick={handleChildEvent}>触发子组件事件</button>
{showChild && <ChildComponent />}
</div>
);
};
export default ParentComponent;
// 子组件
import React from 'react';
const ChildComponent = () => {
return <div>这是子组件</div>;
};
export default ChildComponent;在上述示例中，当点击父组件中的按钮时，会触发handleChildEvent方法，该方法会更新父组件的状态showChild为true，从而显示子组件ChildComponent。
这种方式可以实现向具有同级事件的父组件添加子组件，并且可以根据需要控制子组件的显示与隐藏。
相关·内容
1回答
我正在尝试理解ReactJS中的渲染。我正在学习YouTube的这个教程，但我想更好地掌握这个主题。该视频解释说，如果您传递子组件
<Child/>
然后它将触发父级和子级的呈现。不过，如果你传下去
{props.children}
然后，它将只更新父级，如果子代没有更改。但如果我有一系列不同的孩子呢？如果我有20个孩子或者100个孩子呢？我想把道具传给一个特定的孩子？说我想把道具传给50岁的孩子(或其他孩子)。那我该怎么做呢？
如果我想传递这些常量，孩子们是只在收到道具的情况下才重新渲染，还是会全部重呈现？
const [childA, setChildA] = useState
浏览 5提问于2022-05-23得票数 1
我有一个博客组件，在他里面有一个搜索组件。我需要访问我的博客组件中的searchResults变量。如何将其从搜索组件传递到博客组件？
下面是父组件(博客组件)：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Pagination from "react-pagination-js";
import Spinner from '../Spinner/Spinner';
import { Link } fro
浏览 0提问于2020-08-14得票数 0
我有这个结构
构成部分1
import React, { useState } from 'react'
export default function Component1() {
return (
<div>
<button onClick={handleChange}></button>
</div>
)
}
构成部分2
import React, { useState } from 'react'
export default fu
浏览 4提问于2021-01-26得票数 2
回答已采纳
我有一个react组件，当我单击组件本身上的一个按钮时，我想要自动关闭它。
代码如下：
import React from 'react';
import PropTypes from 'prop-types';
const MyReactComponent = (props) => <div>
<h1>TEST</h1>
<button onClick={self close here?}>Self Close</button>
</div>
export
浏览 0提问于2018-10-03得票数 2
回答已采纳
2回答
我有一个包含行的表，行中的每个单元格都可以编辑。与每一行关联的按钮将将该行中的所有单元格提交给数据库。我想知道的是，如果单元格中的数据已经更改，我如何从提交事件实际发生的组件中访问新值？
下面是我目前正在制作桌子的方法：
主表：
import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import Row from './Row.jsx';
import AppStore from '../../stores/AppSt
浏览 4提问于2016-03-18得票数 1
回答已采纳
我有两个组件：ParentComponent和ChildComponent。
ChildComponent有一个input[type="text"]元素，当它更改文本时，该事件通过事件change和onChange侦听器传播到ParentComponent。
下面的代码是一个更大问题的简化，这就是为什么您会在这里看到一些突出显示的需求。
，我的问题是，我需要在函数handleClick中触发change事件。我做了一些没有运气的实验。
这里有您可以试验的代码沙箱(请用您的方法提供一个分叉)：
这里有代码：
ParentComponent.js
import React fro
浏览 0提问于2018-12-28得票数 3
回答已采纳
在子组件中有一个名为yes的按钮，在该按钮中，我使用从父组件传递的props.id从数组和本地存储中删除列表项。
问题是该项已从数组和本地存储中删除，但在屏幕上仍然可见，直到我按下父组件中另一项上的“删除”按钮。
当我按下父组件中的delete按钮时，它会打开一个覆盖。当我按下“是”按钮时，我希望立即从屏幕上移除列表项。
以下是子组件中的代码。
import React, { useCallback, useState } from "react";
import styles from "./Delete.module.css";
functi
浏览 5提问于2022-06-03得票数 1
回答已采纳
1回答
我正在构建一个基于react的gatsby网页，我需要我的导航组件将他的粘性位置更改为相对或自动，每次我打开图库component..but的模式时，我都不知道如何处理和解决这个问题。nav组件属于布局组件，它是图片库的父component...Here，涉及的组件如下：
nav组成部分：
import React, { Component } from 'react'
import { Location } from '@reach/router'
import { Link } from 'gatsby'
import { Menu, X }
浏览 1提问于2019-12-23得票数 1
回答已采纳
我尝试了以下代码，但失败了，因此，这是我的父组件：
import React from 'react'
import ChildComponent from './ChildComponent';
const ParentComponent = (props) => {
//step 1
// const inputRef = React.createRef();
const buttonRef = React.useRef();
const focusHandler = () => {
a
浏览 1提问于2020-07-05得票数 3
回答已采纳
我有一个父类组件和一个子函数组件。如何将这种类型的子组件的值传递给父组件--我看到了一些将值从子类组件传递给父类组件的示例。
父组件
import React from "react";
import ChildComponent from "./ChildComponent/ChildComponent";
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 5提问于2020-03-02得票数 4
回答已采纳
3回答
试图弄清楚如何在同级组件之间传输数据。这个想法是这样的:您需要确保只有一个子组件有一个“活动”类(只能选择一个div )。下面是代码：https://codepen.io/slava4ka/pen/rNBoJGp import React, {useState, useEffect} from 'react';
import styleFromCss from './Garbage.module.css';
const ChildComponent = (props) => {
const [style, setStyle] = useStat
浏览 17提问于2019-09-23得票数 0
回答已采纳
import React , {useState} from "react"
import ChildComponent from "./ChildComponent"
const App = () => {
const [name , setName] = useState(asd);
return (
<ChildComponent name = {name} setName = {setName}/>
)
export default A
浏览 0提问于2021-04-18得票数 0
回答已采纳
1回答
我想访问子函数中父函数中定义的someVariable。 import React from "react";
export default function Parent(props) {
// Variable is definded
const someVariable = false;
return <div className="parentClass">{props.children}</div>;
}
Parent.Child = function(props) {
// Want t
浏览 15提问于2020-01-29得票数 0
3回答
我有一个从ParentComponent传递到ChildComponent的属性，它会根据用户的输入进行更改。我希望在呈现ChildComponent之前属性发生变化时，在ChildComponent中触发数据获取。我该怎么做呢？我尝试了以下方式，使用useEffects(()=>{}，pros.a，pros.b)，但它总是在渲染之后调用。请帮帮我！
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function pare
浏览 0提问于2020-09-03得票数 4
回答已采纳
我正在尝试从另一个组件打开一个模式。这是在我的父组件中：
import { Button, Modal } from 'react-bootstrap';
import React, { useState } from 'react';
import './App.css';
import ModalB from './ModalB';
function App() {
const [showA, setShowA] = useState(false);
const [showB, setShowB] = useStat
浏览 2提问于2021-07-10得票数 2
在我的父组件中，有一个按钮来控制是否显示子组件。
在输入框中，输入值存储在子组件中。当输入值时，一切看起来都很好，数据在孩子的状态下记录得很好。
单击以不显示
单击以再次显示
子输入框值消失了，子输入框中的状态值也消失了。
当我再次单击以显示子值时，如何保留该值？
在父母中：
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import Child1 from "./child";
import "./
浏览 4提问于2022-08-12得票数 1
回答已采纳
我想在类组件中使用navigation，它不是屏幕组件，也不会通过props自动访问navigation，所以我必须将导航作为props传递给它。但是父组件是一个功能组件，我在其中使用了navigation挂钩。但是，如何在子组件中使用navigation？
ParentComponent.js
import React from 'react';
import {View , TouchableOpacity} from 'react-native';
import {useNavigation} from 'react-navigation-hook
浏览 2提问于2020-07-24得票数 0
回答已采纳
我正在学习React，并且我试图弄清楚每当子组件呈现时如何更改父组件的状态。
以下是我迄今所做的工作：
I通过了父级的状态& setState，并使用了useEffect，它产生无限的呈现。我尝试在呈现之前调用函数，这再次产生无限的呈现。，我尝试使用forEach，但没有工作。
这是一个代码框
这是密码
import React, { useState, useEffect } from "react";
import "./styles.css";
import data from "./data";
export default f
浏览 1提问于2020-09-16得票数 0
我有一个具有动态生成的列标题和行的表，用户可以向这些行输入数据，当他们单击“保存”时，应该将数据保存到该行中，但目前它没有将值保存到表中，而是将它们保存在我的数据库中。理想情况下，我希望这样，当单击“保存”按钮时，数据将保存到该行，然后可以在该行中查看(如果这有任何意义的话)。
下面是我正在使用的代码(我知道现在是一团糟！)：
数据输入表格代码：
import React from 'react';
import AppStore from '../../stores/AppStore';
export default class RowForm extend
浏览 1提问于2016-03-03得票数 0
回答已采纳
我创建ChildComponent表单，并使用submit将数据发送到ParentComponent状态。但发送后我无法清除表单字段。我怎么才能解决这个问题？还有其他方式发送数据吗？
儿童部分：
import React, { Component } from 'react';
class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
name: ""
}
浏览 1提问于2022-09-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
