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

Question

我试图在切换按钮功能实现，当点击按钮willshowtext并再次点击按钮willhidetext。

当我尝试实现这个时，我被困在显示文本。我用下面的内容来显示文字

import React, { Component } from "react";

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

有了这个我可以看到console.log被创建但我无法看到HELLO当我点击按钮。

我错过了什么吗？

任何帮助表示赞赏

谢谢

Answer 1

您不能从事件处理程序返回一个元素，并让它像这样呈现。

您需要隐藏标志后面的文本，然后切换该标志。

首先，我们在州内创建一个标志。这定义是否应显示切换文本。

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

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

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>
        )
      }
    }

Answer 2

您应该在切换时更改状态。

从“react”导入React，{Component};

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>
            }
          })()}
        )
      }
    }

Answer 3

如果您已经使用了箭头函数，则不需要使用bind，除此之外，您还必须学习如何管理状态：

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>
        )
      }
    }

Answer 4

要实现此目的，您需要跟踪组件中的状态以确定是否应显示文本。以下代码应该实现您的目标：

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>
        )
      }
    }

Answer 5

这不是反应和其他基于状态的框架的工作方式。我们的想法是，当状态发生变化时，视图应该会发生变化，只有状态可以导致视图发生任何变化。您需要做的是点击按钮，更改状态，这反过来将导致您的视图更新

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>
        )
      }
    }