在reactjs中单击按钮时不显示任何文本

不能从事件处理程序返回元素并使其呈现为那样。

您需要将文本隐藏在标志后面,然后切换该标志。

首先,我们在州内创建一面旗帜。这将定义是否应显示切换文本。

this.state = {
    showText: false  // Should the text be displayed?
};

接下来,我们更新click处理程序以切换该状态标志。

this.setState((state) => ({
    showText: !state.showText  // Toggle showText
}))

最后,我们有条件地呈现切换文本。如果showText为true,则渲染文本,如果为false,则不渲染文本。

{this.state.showText && <div>HELLO</div>}

正如Mos–Raguzzini所指出的,您不需要绑定事件处理程序。

this.handleClick = this.handleClick.bind(this);  // This is not needed
handleClick = () => {}  // because this is an arrow function

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showText: false  // Should the text be displayed?
        };
      }

      handleClick = () => {
        console.log('Click happened');
        this.setState((state) => ({
            showText: !state.showText  //  Toggle showText
        }))
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
              {this.state.showText && <div>HELLO</div>}
              <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

你应该改变切换状态。

export default class DisplayStats extends Component {
    state = {
     isToggled : false
    }
    constructor(props) {
        super(props);
      }
      handleClick = () => {
        console.log('Click happened');
        this.setState({isToggled : !this.state.isToggled});
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
          {(() => {
            if(this.state.isToggled){
              return <div>HELLO</div>
            }
            else{
             return <div></div>
            }
          })()}
        )
      }
    }

如果已经使用了箭头函数,则不需要使用绑定,除此之外,还需要学习如何管理状态:

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);
        this.state = {
          displayedText: '',
        }
      }
      handleClick = () => {
        console.log('Click happened');
        this.setState({ displayedText: 'This is my text.'});
        
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats. {this.state.displayedText}</h1>
            <button onClick={this.handleClick}>Click Me</button>
          </div>
        )
      }
    }

要实现这一点,您需要跟踪组件中的状态,以确定是否应该显示文本。以下代码应该可以实现您的目标:

export default class DisplayStats extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick = () => {
        console.log('Click happened');

        // When the button is clicked, the text display state is toggled
        this.setState({ showText : !this.state.showText })
      }

      render() {
        // Extract state to determine if the text should be shown
        const showText = !!this.state.showText 

        return (
          <div className="container">
              { /* Render div with text is showState is truthy /* }
              { showText && <div>HELLO</div> }
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

react和其他基于状态的框架不是这样工作的。其思想是当状态改变时视图应该改变,并且只有状态才能引起视图中的任何改变。您需要做的是单击按钮,更改状态,这将导致您的视图更新

import React, { Component } from "react";

export default class DisplayStats extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
          visible: false
        }
      }
      handleClick = () => {
        this.setState({visible: !this.state.visible});
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
              <button onClick={this.handleClick}>Click Me</button>
             { this.state.visible ? <div>Hello</div> : '' }
            </div>
        )
      }
    }