按钮无法在ReactJS中使用onClick方法更改变量
按钮无法在ReactJS中使用onClick方法更改变量
提问于 2020-07-30 18:11:14
我已经创建了一个按钮，用于切换对象的详细信息。但是，当onClick方法不起作用时，按钮不能更改“show”变量的值。
import React from 'react';
import classes from './hospital.module.css';
import {Animated} from "react-animated-css";
const Hospital = props =>{
let show = false;
const togglebeds = () => {
show = !show;
}
return (
<div className={classes.Hospital}>
<h1 className={classes.Heading}>{props.name}</h1>
<button className={classes.Show} onClick={togglebeds}>Show Beds</button>
{show ?
<Animated animationIn="bounceInLeft" animationOut="fadeOut" isVisible={true}>
<p className={classes.Bronze}>Bronze Beds Availability : {props.bed1av}</p><p className=
{classes.Price}> Price: {props.bedtype1}</p>
<p className={classes.Silver}>Silver Beds Availability : {props.bed2av}</p><p className=
{classes.Price}> Price: {props.bedtype2}</p>
<p className={classes.Gold}>Gold Beds Availability : {props.bed3av}</p><p className=
{classes.Price}> Price: {props.bedtype3}</p>
</Animated> : null}
</div>
);
}
export default Hospital;回答 2
Stack Overflow用户
发布于 2020-07-30 18:19:19
仅当更新React组件的状态(或更改其道具)时，React组件才会重新渲染。您可以将show保存在本地状态变量中，这样就可以看到更改。
const Hospital = props => {
const [show, setShow] = React.useState(false);
const togglebeds = () => {
setShow(prevShow => !prevShow); // or setShow(!show);
}Stack Overflow用户
发布于 2020-07-30 18:18:37
您需要使用状态来更改show值
const [show, setShow] = React.useState(false);
const togglebeds = () => {
setShow(!show)
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63170944
复制相关文章
相似问题
腾讯云开发者
