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相关推荐

react实现div隐藏_React 点击按钮显示div与隐藏div
React 点击按钮显示div与隐藏div .m-test{width: 100px;height: 100px;background-color: red;} class Toggle extend ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
点击按钮显示文字，再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字点击按钮显示文字,再次点击按钮隐藏文字通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
项目--点击按钮显示资料，点击空白处隐藏资料
点击空白处隐藏资料点击按钮显示资料在这里插入代码片 <!DOCTYPE html> <html lang="en"><head><met ...
点击按钮显示谷歌地图
原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...
如何在网页点击按钮显示的图片
<template><div><button @click="getData">大力出奇迹</butt ...
Android/安卓点击按钮显示密码
在做app的时候,我们经常会做一个登陆界面,登陆时需要输入账号密码,并且输入时要求密码不可见,但是我们观察会发现大部分app都会提供一个按钮,点击查看输入的密码是否正确,那么怎么实现呢? 效果视频点 ...
网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

React 点击按钮显示div与隐藏div

React 点击按钮显示div与隐藏div相关推荐

最新文章

热门文章