<!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>
![[UWP]使用Picker实现一个简单的ColorPicker弹窗](https://img2018.cnblogs.com/blog/1239018/201811/1239018-20181115001706426-847255787.png)
