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，{组件}；

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

如果您已经使用过箭头功能，则无需使用绑定，此外，您还必须学习如何管理状态：

resource "random_pet" "random" {}

resource "aws_iam_policy" "api_dbaccess_policy" {
  name   = "lambda_dbaccess_policy_${random_pet.random.id}"
  policy = "${file("${path.module}/api-dynamodb-policy.json")}"
}

Answer 4

这不是反应以及其他基于状态的框架如何工作。这个想法是当状态改变时视图应该改变，只有状态可以引起视图的任何改变。您需要做的就是单击按钮，更改状态，这又将导致视图更新

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

Answer 5

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

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

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

5 个答案: