Question

我是Reactjs的新手。我想为App.js中的ButtonComponent组件编写事件处理程序handleClick（），并且想要更改事件处理程序内部的状态。

我的App.js：

import ButtonComponent from "./ButtonComponent"
class App extends Component {
  constructor(){
    super()
    this.state={
      isLoggedIn: true
    }
    this.handleClick=this.handleClick.bind(this)
  }

  handleClick() {
    alert("Reached click event handler")
    if(this.state.isLoggedIn===true){
      this.setState(
        {
          isLoggedIn:false
        }
      )
    }
    else{
        //this.state.isLoggedIn=true 
        this.setState(
          {
            isLoggedIn:true
          }
        )
    }
  }

  render() {
    //alert("Reached")
    return (
      <div>
        <ButtonComponent isLoggedIn={this.state.isLoggedIn} onClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

我的ButtonComponent.js

import React, {Component} from "react";

class ButtonComponent extends Component{
     render(){
        if(this.props.isLoggedIn===true){
            console.log(this.props.isLoggedIn)
            return(
                <button >Logout</button>
            )
        }
        else{
            console.log(this.props.isLoggedIn)
            return(
                <button>Login</button>
            ) 
        }
    }
}


export default ButtonComponent;

但是handleClick（）事件处理程序没有触发。没有显示错误，只是事件处理程序没有执行。

Answer 1

您需要将onClick的{{1}}道具传递到孩子ButtonComponent

<button/>

Answer 2

当您将this.handleClick函数作为道具传递给ButtonComponent时，您需要使用该道具来触发onClick中的ButtonComponent事件。

简化代码

// App.js

class App extends Component {
  constructor() {
    super()
    this.state = {
      isLoggedIn: true,
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    alert('Reached click event handler')
    this.setState({
      isLoggedIn: !this.state.isLoggedIn,
    })
  }

  render() {
    //alert("Reached")
    return (
      <div>
        <ButtonComponent
          isLoggedIn={this.state.isLoggedIn}
          onClick={this.handleClick}
        />
      </div>
    )
  }
}

// ButtonComponent.js

import React, {Component} from 'react'

class ButtonComponent extends Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.isLoggedIn ? 'Logout' : 'Login'}
      </button>
    )
  }
}

export default ButtonComponent

Demo

如何在reactjs中为子组件触发事件处理程序

2 个答案: