如何在React.js中单击按钮时显示文本

Question

具有下面的代码，并试图在React.js中单击按钮来显示文本。

此处提供代码：

class App extends Component{

render(){ 
  alert=()=>{return(<h1>Hi</h1>)}
  return(<div className="App">
    <button onClick={this.alert}>Enter</button>
  </div>);

}}

export default App;

任何想法为什么不起作用...？

Answer 1

如果要在警报窗口中显示它，则需要调用一个函数来触发该窗口。

class App extends Component{

  onButtonClickHandler = () => {
    window.alert('Hi')
  };

  render(){ 
    return(<div className="App">
      <button onClick={this.onButtonClickHandler}>Enter</button>
    </div>);

  }
}

但是，如果您需要在渲染器中显示消息，则可以使用状态进行管理。

class App extends Component{
  state = {
    showMessage: false
  }
  onButtonClickHandler = () => {
   this.setState({showMessage: true});
  };

  render(){ 
    return(<div className="App">
     {this.state.showMessage && <p>Hi</p>}
      <button onClick={this.onButtonClickHandler}>Enter</button>
    </div>);

  }
}

源代码：

如果您需要在单击按钮时切换文本，只需将onButtonClickHandler函数更新为this.setState({ showMessage: !this.state.showMessage });。

Answer 2

它不会像这样显示。在这里，您正在调用警报功能并返回一些JSX。如何反应将知道在哪里渲染？像下面那样做。

class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
    render: false
}
this.alertHi = this.alertHi.bind(this);
}

alertHi() {
 this.setState({render: !this.state.render});
}

render() {
  return(
  <div className="App">
    <button onClick={this.alertHi}>Enter</button>
    {this.state.render && <h1>Hi</h1>}
  </div>
  );
 }
}

Demo