onSubmit是AddExpense组件如何从ExpenseForm获取数据？
数据不能从孩子发送给家长，不是吗？
我对在组件之间发送数据感到非常困惑？
AddExpensePage.js
import React from 'react'
import { connect } from 'react-redux'
import ExpenseForm from './ExpenseForm'
import { addExpense} from '../actions/expenses'
const AddExpensePag
浏览 1提问于2019-11-21得票数 1
回答已采纳
我遵循一个带有Hooks在线课程的Advanced模式，在这个早期的例子中，他们用以下API创建了一个可扩展组件(比如经典的手风琴或可折叠面板)：
<Expandable>
<Expandable.Header>This is the header</Expandable.Header>
<Expandable.Body>This is the content</Expandable.Body>
</Expandable>
他们使用上下文将州expanded传递给可扩展的孩子。到目前为止还不错：
impor
浏览 1提问于2020-09-03得票数 3
回答已采纳
假设我有这样的例子：
import React, { useMemo, useCallback } from 'react'
const Hello = (props) => {
const { firstName, lastName } = props
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName])
const sayHello = useCallback(() => {
console.log(`Hello, ${fu
浏览 3提问于2020-11-26得票数 2
回答已采纳
我正在优化应用程序的性能，我想知道是否对那些不依赖于任何变量的函数使用useCallback钩子。
考虑以下情况:假设我们有一些功能：
const someFunc = () => {
let someVar = "someVal";
/**
* here some extra calculations and statements regarding 'someVar'.
* none of the statements depends on a variable outside this function scope.
*/
浏览 3提问于2020-06-10得票数 10
回答已采纳
我希望传递布尔状态以将className从一个组件更改为另一个组件。我试图通过{this.props.isOpen}传递它，但是它没有工作。如何将状态值传递给另一个组件？
父组件
class Category extends React.Component {
constructor(props) {
super(props);
this.state={ isOpen: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ is
浏览 5提问于2017-09-11得票数 1
回答已采纳
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我正在尝试将一个状态从一个无类的子组件作为一个道具传递给一个父类组件。如何让父组件中的region在每次从子组件的下拉菜单中选择一个新区域时进行更新？ 父组件： 导入： import '../Styles/App.css';
import Menu from './Menu';
import { Button } from '@material-ui/core';
import React from 'react';
import CountryList from './CountryList'; 家长所在的州：
浏览 10提问于2020-10-30得票数 0
因此，我有一个Operations.js组件，当父组件(ParamsForm.js)中的特定按钮被切换时，它会被呈现。现在，我想要的是，当父组件中的表单被提交时，我希望父组件表单字段的数据以及子组件表单字段的数据能够登录到控制台上。有什么办法可以做到这一点吗？
ParamsForm.js
import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
浏览 1提问于2022-06-25得票数 0
回答已采纳
我是新的反应(和一般的网页开发)试图建立一个简单的应用程序。我相信这是显而易见的，但一天都找不到解决办法。使用下面的代码，我得到了一个错误: Uncaught不变冲突:对象作为React子对象无效(找到:带有键{message}的对象)。如果您打算呈现一个子集合，请使用数组代替。
我也尝试了几种方法来纠正每一个其他的帖子，但从未成功(并得到不同的错误)，我觉得我错过了这里，非常简单的东西。有人能看看我的代码告诉我出了什么问题吗？
父组件(传递此组件从服务器获取的消息id的另一个组件的子组件)：
import React from 'react';
import Singleme
浏览 3提问于2019-10-29得票数 0
3回答
如何在反应中从子组件中获得值？
、、、、
我创建了一个InputComponent，我想在其他组件中导入这个组件并提交，但是我做不到。如何从FormComponent中的子组件中获得值
InputComponent.js
import React, {Component} from 'react';
class InputComponent extends Component {
constructor(props) {
super(props);
this.state = { currentVal: null }
}
render() {
浏览 0提问于2018-12-12得票数 2
回答已采纳
我有一个演示here 这是一个简单的购物车应用程序，在那里我用一个按钮将产品添加到列表中。 购物车和要添加到购物车的功能位于与产品所在位置不同的组件中。 如何从单击按钮的应用程序组件调用addToCart函数。 const handleClick = (
e: React.MouseEvent<HTMLInputElement, MouseEvent>,
item: IProduct
) => {
e.preventDefault();
// Call the add to cart function
Cart.addToCart
浏览 20提问于2020-12-25得票数 1
回答已采纳
1回答
我的应用程序由按省选择的过滤器组成，过滤器是在过滤器组件(子)中显示结果的模式，我想在父模式中显示结果，而不是在过滤器模式中显示结果。我不知道如何传递给父母以显示结果，也不知道如何在屏幕上显示结果。
/父组件
import React, { useState, useEffect } from 'react'
import { useDispatch } from "react-redux";
import { getClinic } from '../../api/drupalAPI'
import {Clinic} from '@ic
浏览 1提问于2022-09-02得票数 2
我有两个js文件，一个是app.js，另一个是foo.js。我想访问app.js在foo.js中的状态。
App.js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {test:" None "};
}
function onChange(event) {
this.setState({
test: event.target.value,
});
}
render() {
retur
浏览 2提问于2019-05-03得票数 0
回答已采纳
当用户单击MUI Datagrid中的按钮时，我试图将数据传递到另一个页面。我使用的是中的useHistory，但我面临的问题是如何实现useHistory。
如何让useHistory在我的函数handleEdit中工作，因为错误显示为"handleEdit，它既不是function函数组件，也不是自定义useHistory函数“。
表组件
import React from "react";
import { useHistory } from "react-router-dom";
import { DataGrid} from "@mui
浏览 13提问于2022-12-02得票数 0
新来的。
我一直在寻找答案，和。
我也在使用Redux。根据良好实践，我有一个容器"AddressContainer“及其组件"Address”。
AddressContainer的内容如下-
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Field, change } from 'redux-form'
import { Col,
浏览 3提问于2017-06-10得票数 0
回答已采纳
2回答
有人能告诉我为什么当我在componentWillMount()方法中设置状态时，render()中的函数在设置状态之前运行，即
这是我的应用：
class App extends Component {
constructor(props){
super(props);
this.state={
x : 50,
y : 100,
width : 200,
height : 300
}
this.handleDuplicate = this.handleDuplicate.bind(this);
}
浏览 0提问于2018-09-25得票数 1
我在做Reactjs天气项目。在提交后，我将在子组件(Form.js)的方法中获取值，并且需要在父组件(App.js)中获得该值。如何得到这个价值？
App.js文件(父组件)
getWeather = async (e) => {
e.preventDefault();
}
Form.js文件(子组件)
import React, { Component } from 'react'
import Background from '../video/rain_drop2.jpg';
import { ToastContainer, toast
浏览 0提问于2019-10-28得票数 1
回答已采纳
1回答
我正在设置一个新的meteor react应用程序，它从服务器订阅新数据。我只想将数据绑定到主页面组件。我有以下代码主页组件。 import React from 'react';
import ReactDOM from 'react-dom';
import RealTime from '../../../lib/client/RealTime';
// TrackerReact is imported (default) with Meteor 1.3 new module system
impor
浏览 21提问于2019-05-15得票数 0
我的根组件是App.js。它有许多子组件。但是我在子组件中声明了函数，并且我需要在react js中的同等级别组件中访问这些函数。在此处输入图像描述
这是组件层次结构。我需要将函数从自定义播放器传递到播放按钮组件1：
浏览 1提问于2021-12-02得票数 0
1回答
我很难更新我的状态和组件。在按下一个按钮后，我将更改弹出组件的一个支持的值。不更新道具的值。我相信这是使用setstate的副作用之一。我做了一些研究，发现使用useeffect钩子解决这个问题是有办法的，但我无法得到结果。下面是我的代码：
我的目标是从拥有Data0支持的表单获得一个Data1的道具，但是这个道具似乎根本没有更新。我模拟单击多个对象，结果是更新了fromData的值。因此，app.js是我的父组件。子组件是弹出窗口，其值应该更改为Bob和实际日期，而不仅仅是原始名称和原始日期的字符串值。
import React, { useState, useEffect } from &
浏览 4提问于2021-06-08得票数 0
回答已采纳
我将我的App.js文件包装在withLDProvider组件中，我想知道如何从我的应用程序函数内部设置用户信息。 比方说，我得到了缓存在我的App函数内部的Dexie中的用户名，在导出App函数时，我如何将该用户信息传递到设置用户详细信息的位置。 我已经可以获得我所有的用户信息，只是不确定我应该如何传递用户信息。我觉得我在这里采取了错误的方法，但我不太确定该怎么做。 import React from 'react';
import './App.css';
import { withLDProvider } from 'launchdarkly-r
浏览 48提问于2019-09-10得票数 4
我有子组件：
import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";
class Child extends Component<any, any> {
childFunction = () => {
console.log('childFunction');
};
render() {
return &l
浏览 16提问于2019-07-13得票数 0
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
1回答
新的反应，并有一个下拉组件，即下面，其中，在选择，我得到一个值，我需要处理(即id)。
import React, { Component } from 'react';
class DropDown extends Component {
state = {
//value: this.props
value: id
};
handleChange = event => {
const { value } = event.target;
this.setStat
浏览 3提问于2021-04-14得票数 0
回答已采纳
我是新来的反应。我有一个有几个类组件和无类组件的react。我有两个组件，需要从子组件向父组件发送数据(本例中为“projectID”)。我的子组件是一个无类组件。我知道我可以在类组件中这样做，如下所示
sendId(id) {
this.setState({ projectID:id }, () =>
this.props.onClick(this.state.projectID)
)
}
但是我有一个没有类的子组件
儿童部分：
const sendId = (id) => {
// How to setup "send id to parent&#
浏览 0提问于2019-04-01得票数 3
回答已采纳
我有一个名为ListChats的react组件和另一个名为Chat的组件。
ListChats调用聊天的呈现
我需要的是，如果在呈现聊天时出现错误，ListChats会知道并返回可用聊天列表。
一个可能的错误，它的捕获尚未实现，将是如果用户没有名称，聊天捕获此错误并返回到ListChat。
ListChats组件：
import React, { Component } from "react";
import Chat from "../Chat";
import { Button } from 'react-bootstrap';
exp
浏览 3提问于2021-02-16得票数 1
我是新来的。
我需要改变点击按钮的整个视图。
为此，我需要从子组件中更新父组件的状态。
就像我们做的会话变量一样。你们知道吗那就帮帮我吧。
提前谢谢。
这是我的密码：
App.jsx
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
let RedirectTo = this.state.page;
let RenderPage;
switch (RedirectTo) {
case 'component':
浏览 6提问于2017-05-03得票数 0
回答已采纳
我必须渲染几张标签。它的ONclick，它应该被突出显示。我有来自还原器的tabList对象(硬编码值)。单击一个选项卡就会生成一个动作，它用单击的选项卡对象设置"state“(我称之为"activeTab")。
在呈现tabList (所有选项卡)时，我正在检查"rendered_tabid == active_tabid“，然后添加一个类"active”(它是条件基)
active-tab-reducer.js
export const tabReducer = () => {
return [
{
id:
浏览 3提问于2016-08-30得票数 1
回答已采纳
1回答
如何理解React文件
、、、、
我在Laravel中使用React，我发现了一个无法刷新或重新加载页面的问题。因此，为了解决这个问题，我找到了许多建议，比如使用historyApiFallback、404 page和许多其他方法，但我现在发现它们对我都没有用处。
我知道我不能这样做，因为React没有系统，因为有服务器和客户端路由。然后我找到了一个演示项目，他们在那里使用了Redux，我可以刷新他们的页面。我得到了演示项目，我可以使用任何组件，并刷新他们多少次我想。所以有一个带有Base.js的文件名，我不理解他为什么要使用它。让我分享一下这个文件以及它的使用地点。
Base.js
import React from
浏览 3提问于2021-04-12得票数 1
回答已采纳
我必须通过迭代对象来生成制表符。
父类是TabsList，子类是TabsListItems。数据作为道具从父到子之间流动。现在在子类中有一个<li>元素(它是baisclly选项卡)。应该调用OnClick of it，selectTab方法，它在actiotn.js中，但我的matchDispatchToProps(dispatch )方法在父方法中。
如何调用在父类中绑定的方法？
我将一个对象作为道具传递给子类。
父组件
import React from 'react';
import {connect} from 'react-red
浏览 1提问于2016-08-30得票数 1
回答已采纳
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
3回答
我有一些很重的表格要处理。因此，我试图在任何能够找到性能的地方压缩性能。最近，我添加了“为什么-你-给我的评论，以获得更多的洞察力，可能会减缓我的网页。”例如，当我单击复选框组件时，我注意到了所有其他组件的重新呈现。理由总是一样的。WDYR说
重新呈现是因为道具更改:相同名称的不同函数{prev onChangeHandler:ƒ} "!==“{next onChangeHandler:ƒ}
我尽量尊重我所发现的最佳做法。组件传递的回调函数遵循以下模式
import React, { useState, useEffect } from 'react';
imp
浏览 1提问于2019-05-17得票数 5
回答已采纳
我正在开发一个基于反应的应用程序，在使用HasRole组件呈现某些jsx之前，我正在检查用户的权限。所有操作都很好，除非我有一个函数作为HasRole组件的子函数，如果用户也没有权限，则每次父组件呈现时都调用该函数。我怎样才能防止这种情况发生。
HasRole.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class HasRole extends Component {
render() {
const { children,
浏览 1提问于2018-04-05得票数 3
2回答
我有一个可重用的组件，它有自己的操作和还原器，然后在另一个组件中使用。
组件AddToCart
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import Button from 'environment/atoms/button'
import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators'
const Add
浏览 4提问于2016-09-01得票数 0
回答已采纳
2回答
handleShowMatchFacts = id => {
// console.log('match', id)
return fetch(`http://api.football-api.com/2.0/matches/${id}?Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76`)
.then(res => {
// console.log('match facts', matchFacts)
th
浏览 4提问于2017-05-02得票数 0
回答已采纳
1回答
在下面的React组件中，我使用获取了更多的条目。
在这里使用的确切目的是什么？在这种情况下使用这个方法好吗？
const Carousel = ({ data: blockData, metadata }: Props) => {
const { data, fetchMore, networkStatus } = useQuery<
GqlRes,
>(GET_NODES, {
variables: {
offset
limit
},
errorPolicy: 'all',
notif
浏览 4提问于2021-12-17得票数 1
我有一个问题，我想从子组件中获取值并在父组件中使用它。
这是父组件，我通过props将一个值i传递给它的子组件，我想要取回它，那么我该如何实现呢？
import React, { Component } from 'react'
import { render } from 'react-dom'
import {Row} from 'react-bootstrap';
import Rectangle from './Rectangle.js';
import '../App.css';
class Rect
浏览 0提问于2017-05-01得票数 2
1回答
因此，我在react JS上做了一个tic-tac-toe项目，我必须将正方形组件的密钥传递给开发checkWinner函数的游戏组件(父组件)。请指导我如何传递它，因为我必须通过键定位每个正方形组件的值。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/1
浏览 1提问于2020-05-11得票数 0
我已经创建了两个组件(父组件和子组件)&导入包含react-native模式的子组件 我在状态改变后渲染子组件，它第一次渲染，但在第二次，它不工作。 Parent.js文件如下： import react, {Component} from 'react';
import { View, Text, TouchableOpacity} from 'react-native';
import ActionModal from './ActionModal';
export default class Parent extends Com
浏览 23提问于2019-09-22得票数 0
最近，我决定刷新react的文档，并遇到了 (React.memo)。
乍一看，它看起来很适合我的所有功能组件。因此，我就这样做了，并将memo应用于所有这些程序。
我不确定我是否能注意到戏剧性的性能提升，但这肯定没有让任何事情变慢。
因此，问题是:在默认情况下，我是否应该将备注应用于我的所有功能组件，以防万一，这样我才能捕捉到重新呈现许多元素的边缘情况？这个/其他我需要注意的东西有什么缺点吗？
浏览 0提问于2019-01-03得票数 6
回答已采纳
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我在网站的左侧有一个按钮列表(这个列表可以通过添加条目变得更大，也可以通过删除它们变小)，当我单击一个按钮时，我想要显示存储在网站右侧的特定按钮中的内容。 现在，我可以向按钮添加一个活动类。所以当我点击一个按钮时，它的内容就会显示出来。但我希望一次只显示一个内容，而不是再次单击相同的按钮来删除类。例如，当我单击另一个按钮时，前一个被单击的按钮的类将被移除，并添加到实际被单击的按钮中。如何处理这一点？ 此外，我希望在同一位置显示的内容。现在，内容从相关按钮的高度开始。我不想使用框架。我找到了几个示例，但每个示例都包含硬编码的按钮/内容。 感谢您的回答。 以下是该按钮的组件： import Re
浏览 31提问于2021-08-17得票数 0
我有一个关于react和forms的问题。
我有一个有3个组件的InfluencerForm，每个组件都有多个输入，选择表单等，InfluencerForm有和输入提交。
如何从子组件获取数据来处理父组件中的表单提交？如果重要的话，我正在使用materialui库。
在示例代码中，您可以理解，BasicInfo大约有10个输入要处理
<code>A0</code>
浏览 4提问于2019-12-05得票数 0
我正在使用语义UI的Card.Group组件来显示一堆卡片。数据来自外部JSON，格式化后传递给组的items支柱。
我想把道具传递给组中的卡片(即让它们成为raised或set size="mini")，我怎么做呢？还是必须对JSON项使用.map()，并在道具中指定Card组件？
更新:代码(在这里非常有用)：
import React from 'react';
import {Card, Container} from 'semantic-ui-react';
//assume this JSON comes from an API
c
浏览 0提问于2019-04-17得票数 2
回答已采纳
我有一个类似于下面的react组件：
let TabComponent = React.createClass({
getInitialState : function() {
return {
tubesArray: [ ],
rows: 10,
tubesPerrow: 10,
};
},
render: function() {
return (
<div className={styles.drawingWr
浏览 12提问于2017-01-09得票数 0
回答已采纳
3回答
使用React类，当构造函数中有state时，您可以将其直接继承到子组件，并使用回调从子组件继承到父组件。如何使用钩子将状态从父对象转移到子对象？useReducer或Redux是唯一的方法吗？
浏览 28提问于2020-05-18得票数 1
回答已采纳
4回答
首先，我要指出，我不需要得到现成的解决办法。我只是需要一些指导如何正确地做这件事。
我有这样的父组件
import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js&
浏览 4提问于2020-12-28得票数 0
回答已采纳
如何将ChildComponent中的hello值传递给App组件，并在页面加载时将其存储在ChildComponent的childProps变量中。
import React, { Component } from 'react';
class App extends Component {
render() {
var childProps ''; // I want store the passed const value in this variable;
return (
<div>
<Ch
浏览 8提问于2022-01-28得票数 1
1回答
我有一个Parent React本机组件，它由三个子组件Header、Body和Footer组成。这是如何在文件MyScreen.js中安排的。
<Container> // I am using NativeBase Container
<Header />
<Body />
<Footer />
</Container>
这三个子组件的定义包含在单独的文件中，例如Body.component.js等。
我希望访问包含在不同文件FooArray.js中的数组数据结构FooArray.js，它是由Body和Foo
浏览 0提问于2018-09-08得票数 0
回答已采纳
1回答
本质上，我试图创建一个应用程序，它有一个便笺板功能，它打开一个窗口子程序，并将一些信息从父程序(它持有redux状态)传递给它。
但是，我在如何将信息从孩子发送给父母方面遇到了困难，特别是如何处理发送操作。
在不使用Redux的情况下，我能够在从父母传给孩子的过程中解决这个问题：
父窗口
class NavBar extends React.Component {
constructor() {
super()
this.handleNotesMenu = this.handleNotesMenu.bind(this)
}
handleNote
浏览 0提问于2017-06-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
