为什么HTML无法在reactjs中的按钮单击上打印？

问题描述

单击添加按钮时，我试图在屏幕上打印“ Hello”。但是它没有显示。预先感谢您提供的任何答案！

if(message.author.id !== 'your id') {
  return message.channel.send('You are not my creator');
}

解决方法

在onClickEvent中返回HTML没有意义，结果将显示在哪里？

我会用状态来管理它，诸如此类

    class MainPage extends Component {
    
    this.state = {
            buttonPress:false
        }

        render() {
            return (
                <div>
                    <div className="main-container">
                        <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                        <div className="input-group mb-3">
                            <input type="text" id="task" className="form-control" placeholder="New Task"/>
                            <div id="name"></div>
                            <div className="input-group-append">
                                 <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                                 {{this.state.buttonPress? <h2>Hello</h2> : <span/>}}
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    
        addTask = () => {
            this.setState({buttonPress:true});
        }
    }
    
    export default MainPage;

,

函数将在哪里返回“ Hello”代码？

import React,{ Component } from 'react';
import './App.css';
import './Login.jsx';
import './Navbar.jsx';

class MainPage extends Component {
 state = {
    showMessage: false
  }
  addTask= () => {
   this.setState({showMessage: true});
  };
    render() {
        return (
            <div>
                <div className="main-container">
                    <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                    <div className="input-group mb-3">
                        <input type="text" id="task" className="form-control" placeholder="New Task"/>
                        <div id="name"></div>
                        <div className="input-group-append">
                            <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                            {this.state.showMessage && <div>
                              <h2>Hello</h2>
                            </div>}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

export default MainPage;

尝试使用此代码，我创建了一个跟踪div可见性的状态。 这里有更多信息：

How do I display text on button click in React.js

,

您应该使用state

import React,{ Component } from 'react';

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {testVarible: null}
    }

    render() {
        return (
            <div>
                <div className="main-container">
                    <h1 style={{textDecoration:'underline'}}>Tasks</h1>
                    <div className="input-group mb-3">
                        <input type="text" id="task" className="form-control" placeholder="New Task"/>
                        <div id="name"></div>
                        <div className="input-group-append">
                            <button id="btn" className="btn btn-success" onClick={this.addTask}>Add</button>
                        </div>
                    </div>
                </div>
                {this.state.testVarible}
            </div>

        );
    }

    addTask = () => {
        this.setState({testVarible: (
          <div>
            <h2>Hello</h2>
          </div>
        )});
    }
}

export default App;