Onclick listener - значение типа string

Question

Инвариантное нарушение: ожидается, что onClick слушатель будет функцией, вместо этого получил значение типа string. (/node_modules/fbjs/lib/invariant.js:42)

import React from "react"



class App extends React.Component{
    constructor(){
        super()
        this.state = {
            isLoggedIn : false,
            innerText : "Log In"
        }
        this.handleClick = this.handleClick.bind(this)
    }


    handleClick(){
        this.setState(prevState => {
if(prevState.isLoggedIn === true){
    return{
        isLoggedIn: false,
        innerText: "Log in"

    }

    return{
        isLoggedIn : true,
        innerText: "Log out"
    }

}



        })

    }

    render(){
        return(
            <div>
            <h1>You are not logged</h1>
            <button onClick = "handleClick()">{this.state.innerText}</button> 
            </div>


          )
        }
    }


    export default App

Answer 1

Правильный синтаксис для добавления прослушивателей событий к кнопке выглядит так:

<button onClick={this.handleClick}>{this.state.innerText}</button> 

Вы также можете очистить функцию handleClick, чтобы она была немного более встроенной. Если сложить все вместе, это будет выглядеть так:

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      isLoggedIn : false,
      buttonTitle : "Log In"
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    this.setState(prevState => ({
      isLoggedIn: !prevState.isLoggedIn,
      buttonTitle: `Log ${prevState.isLoggedIn ? 'in' : 'out'}`
    })
  }

  render(){
    return(
      <div>
        <h1>You are not logged</h1>
        <button onClick={this.handleClick}>{this.state.buttonTitle}</button> 
      </div>
    )
  }
}

export default App