React 点击按钮显示div与隐藏div
生活随笔
收集整理的這篇文章主要介紹了
React 点击按钮显示div与隐藏div
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>React 點擊按鈕顯示div與隱藏div</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><style type="text/css">.m-test{width: 100px;height: 100px;background-color: red;}</style></head><body><div id="root"></div><script type="text/babel">class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true,dispaly: 'block'};// 這個綁定是必要的，使`this`在回調中起作用this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn,display: prevState.isToggleOn ? 'none': 'block'}));}render() {return (<div><button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button><div className="m-test" style={{display: this.state.display}}></div></div>);}}ReactDOM.render(<Toggle />,document.getElementById('root'));</script></body>
</html>
?
?
?
?
?
轉載于:https://www.cnblogs.com/xutongbao/p/9924747.html
總結
以上是生活随笔為你收集整理的React 点击按钮显示div与隐藏div的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .net core consul 服务配
- 下一篇： PyTorch 1.0 中文文档：常见问