javascript - 使用参数依赖于子组件的函数更新父组件状态

Question

我知道这似乎与That question重复，但事实并非如此，我需要做一些稍微不同但不起作用的事情。

我正在实施：

• 一个<Page/>有两个子组件的组件：
  • 一条<Greetings/>消息。
  • 一个<LoginButton/>按钮。

<Page/>有{isLogged: false}状态。当为真/假<Greetings/>时应该显示不同的消息。isLogged

<LoginButton/>当' 为假时应该有一个login文本，否则，并实现一个从其父组件更新状态的函数， .isLoggedlogoutisLogged<Page/>

通过这个实现，我愿意学习：

• <Greetings/>: 如何实现一个子组件，其 props 绑定到父组件状态（有效）
• <LoginButton/>：如何从子组件更新父组件的状态，setState通过其道具为子组件传递父组件（不起作用）。

这是我的源代码：

import React from 'react';
import ReactDOM from 'react-dom';


class Greetings extends React.Component{
  render(){
    if(this.props.isLogged){
      return <p>You're logged. Welcome Back!</p>
    }
    return <p>You're not logged. Please Login</p>
  }
}

class LoginButton extends React.Component{
  login(){
    console.log(this.props)
    this.props.handler({isLogged: true})
  }

  logout(){
    this.props.handler({isLogged: false})
  }
  
  render(){
    if(this.props.isLogged){
      return <button onClick = {()=>{this.logout()}}>logout</button> 
    }
    return <button onClick = {()=>{this.login()}}>login</button>
  }
}

class Page extends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
  }

  handler(newState){
    this.setState(newState)
    console.log(this.state)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton isLogged={this.state.isLogged} handler = {()=>this.handler}/>
      </>
    )
  }
}

const element = <Page/>
ReactDOM.render(element, document.getElementById('root'))

我的代码与其他 StackOverflow 问题的大多数示例之间的主要区别在于，由子组件<LoginButton/>决定调用的参数this.render，这给我带来了问题。

我相信功能login()和logout()功能有问题，但我无法发现是什么。

页面呈现，但按钮不起作用。请帮帮我。

标签： javascriptreactjs

Answer 1

这是因为您在 this.handle 中期待和争论，但没有从道具传递值。这应该可以解决您的问题。

class Page extends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
  }

  handler(newState){
    console.log(newState)
    this.setState(newState)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton handler = {(newState) => this.handler(newState)}/>
      </>
    )
  }
}

或者你也可以通过绑定你的处理函数并简单地将它作为道具传递给子组件来做到这一点，而不是调用它。

class Pageextends React.Component{
  constructor(props){
    super(props)
    this.state = {isLogged: false}
    this.handler = this.handler.bind(this);
  }

  handler(newState){
    console.log(newState)
    this.setState(newState)
  }

  render(){
    return(
      <>
      <Greetings isLogged={this.state.isLogged}/>
      <LoginButton handler = {this.handler}/>
      </>
    )
  }
}