如何在 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>
  );
 }
}

演示