当前位置: 首页 > 面试题库 >

如何在React中将状态传递回父级?

蓟和煦
2023-03-14
问题内容

我有一个带有提交按钮的表单。该表单调用一个onclick函数,该函数将某物的状态从false设置为true。然后,我想将此状态传递回父级,这样,如果为true,则呈现componentA;如果为false,则呈现componentB。

我会如何反应?我知道我需要使用状态或道具,但不确定如何使用它。这也与单向流动反应原理矛盾吗?

ComponentA代码:

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

控制其显示内容的父组件:

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )

问题答案:

移动handleClick到父级并将其作为道具传递给子级组件。

<LoginPage handleClick={this.handleClick.bind(this)}/>

现在在子组件中:

<form onSubmit={this.props.handleClick}>

这样,提交表单将直接更新父组件中的状态。这假设您不需要访问子组件中的更新状态值。如果这样做,则可以将状态值作为道具从父级传递回子级。保持单向数据流。

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>


 类似资料:
  • 我有一个表单,它有一个提交按钮。该表单调用一个函数onclick,该函数将某物的状态从false设置为true。然后我想把这个状态传递回父级,这样如果为true,它将呈现componentA,如果为false,它将呈现componentB。 我会如何反应呢?我知道我需要使用状态或道具,但不知道如何使用。这是否与单向流反应原理相矛盾?? 组件A代码: 控制其显示内容的父组件:

  • 问题内容: 我的结构如下所示: 组件3应该根据组件5的状态显示一些数据。由于道具是不可变的,我不能简单地将其状态保存在组件1中并转发它,对吗?是的,我已经阅读了有关redux的内容,但不想使用它。我希望有可能通过反应来解决。我错了吗? 问题答案: 对于孩子与父母的通信,您应该传递一个将状态从父母设置为孩子的函数,如下所示 这样,孩子可以通过调用通过props传递的函数来更新父母的状态。 但是您将不

  • 问题内容: 我是第一次使用React-router,但现在还不知道如何思考。这是我在嵌套路由中加载组件的方式。 入口点.js App.js 因此,我的App的子级是我发送的内容组件。我使用的是Flux,我的App.js具有状态并侦听更改,但是我不知道如何将该状态传递给this.props.children 。在使用react-router之前,我的App.js显式定义了所有子级,因此传递状态是自然

  • 我试图找出如何通知另一个组件状态更改。假设我有3个组件——pp.jsx、Header.jsx和SidebarPush.jsx我只是想用onclicka切换一个类。 因此,标题。jsx文件将有2个按钮,点击时将切换状态为真或假。另外两个组件是应用程序。jsx和Header。jsx需要了解这些状态的变化,以便在这些状态发生变化时可以切换类。

  • 我的Navbar组件有2个子组件。每个组件都有自己的状态。在其组成部分内工作正常的国家。如何更新这两个状态从假到真的同时,当两个功能onclick将被执行? 主组件导航栏 列表菜单组件 汉堡包成分