如何在 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

如果要在警报 window 中显示它，则需要调用 function 来触发 window。

class App extends Component{

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

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

  }
}

但是，如果您需要在渲染中显示消息，您可以使用 state 来管理它。

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 function 更新为this.setState({ showMessage: .this.state;showMessage }); .

Answer 2

它不会那样显示。 在这里，您正在调用警报 function 并返回一些 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>
  );
 }
}

演示