英文:
problem with switching between img and text in react
问题
It seems like you want to toggle between displaying an image and text when clicking on buttons, but you're encountering an issue where clicking on the same button a second time returns to displaying the image. To achieve the desired behavior, you can modify your code as follows:
First, update your SectionFour component to handle the toggle logic more effectively:
import React, { useState } from 'react';
import './home-css/sectionthree.css';
import secThee from './Home-assets/sec3.jpg';
const SectionFour = () => {
const [activeButton, setActiveButton] = useState(0);
const handleButtonClick = (buttonNumber) => {
setActiveButton((prevActiveButton) => (prevActiveButton === buttonNumber ? 0 : buttonNumber));
};
return (
<div className='section-three-container'>
<div className='section-three grid-system'>
<div className='benefits-text'>
<p className='ben-title'>buttons</p>
<div className='sub-benefits'>
{[1, 2, 3, 4, 5, 6].map((buttonNumber) => (
<div key={buttonNumber} className={`sub-ben text-${buttonNumber}`}>
<button onClick={() => handleButtonClick(buttonNumber)} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
{buttonNumber}
</button>
</div>
))}
</div>
</div>
{activeButton === 0 ? (
<img src={secThee} draggable="false" />
) : (
<div className={`hidden-content-${activeButton} hidden-content`}>
<p className='hidden-title'>Text{activeButton}</p>
<p className='hidden-para'>Text{activeButton}</p>
</div>
)}
</div>
</div>
);
};
export default SectionFour;
In this modified code, we maintain the active button's state (activeButton) and use a function to toggle it. When a button is clicked, it checks if the clicked button is the same as the currently active button; if it is, it toggles back to 0 (displaying the image). Otherwise, it updates to the clicked button number, showing the corresponding text. This should prevent the issue you were facing with clicking the same button twice.
英文:
import React, {useState} from 'react'
import './home-css/sectionthree.css'
import secThee from './Home-assets/sec3.jpg'
const img = ()=>{
return <img src={secThee} draggable="false" />;
}
const secTwo = (value,active) => {
if(active){
switch (value) {
case value 0:
return <img src={secThee} draggable="false" />
break;
case value 1:
return(<div className='hidden-content-one hidden-content'>
<p className='hidden-title'>Text1</p>
<p className='hidden-para'>Text1</p>
</div>)
break;
case value 2:
return(
<div className='hidden-content-two hidden-content'>
<p className='hidden-title'>Text2</p>
<p className='hidden-para'>Text2</p>
</div>)
break;
case value 3:
return(<div className='hidden-content-three hidden-content'>
<p className='hidden-title'>Text3</p>
<p className='hidden-para'>Text3</p>
</div>)
break;
case value 4:
return(<div className='hidden-content-four hidden-content'>
<p className='hidden-title'>Text4</p>
<p className='hidden-para'>Text4</p>
</div>)
break;
case value 5:
return(<div className='hidden-content-five hidden-content'>
<p className='hidden-title'>Text5</p>
<p className='hidden-para'>Text5</p>
</div>)
break;
case value 6:
return(<div className='hidden-content-six hidden-content'>
<p className='hidden-title'>Text6</p>
<p className='hidden-para'>Text6</p>
</div>)
break;
default:
return <img src={secThee} draggable="false" />
break;
}
}else{
return <img src={secThee} draggable="false" />
}
}
const hellobe = (buttonValue,buttonActive) =>{
console.log(buttonValue,buttonActive);
}
const SectionFour = () => {
const [hello,setHello] =useState({value:0,active:false});
const buttonOne = () =>{
setHello({...hello,value:1,active:!hello.active});
return hello.value,hello.active;
}
const buttonTwo = () =>{
setHello({...hello,value:2,active:!hello.active});
return hello.value,hello.active;
}
const buttonThree = () =>{
setHello({...hello,value:3,active:!hello.active});
return hello.value,hello.active;
}
const buttonFour = () =>{
setHello({...hello,value:4,active:!hello.active});
return hello.value,hello.active;
}
const buttonFive = () =>{
setHello({...hello,value:5,active:!hello.active});
return hello.value,hello.active;
}
const buttonSix = () =>{
setHello({...hello,value:6,active:!hello.active});
return hello.value,hello.active;
}
return (
<div className='section-three-container'>
<div className='section-three grid-system'>
<div className='benefits-text'>
<p className='ben-title'>buttons</p>
<div className='sub-benefits'>
<div className='sub-ben text-one'>
<button onClick={buttonOne} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
1
</button>
</div>
<div className='sub-ben text-two'>
<button onClick={buttonTwo} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
2
</button>
</div>
<div className='sub-ben text-three'>
<button onClick={buttonThree} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
3
</button>
</div>
<div className='sub-ben text-four'>
<button onClick={buttonFour} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
4
</button>
</div>
<div className='sub-ben text-five'>
<button onClick={buttonFive} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
5
</button>
</div>
<div className='sub-ben text-six'>
<button onClick={buttonSix} className='sub-ben-text'>
<span></span>
<span></span>
<span></span>
<span></span>
6
</button>
</div>
</div>
</div>
{hellobe(hello.value,hello.active)}
{secTwo(hello.value,hello.active)}
</div>
</div>
)
}
export default SectionFour
I am trying to change from img to text by clicking on one of the buttons in the code below. But when I click on the same button a second time it returns to the img.
When I click on a button, it changes it to img as expected, but when I click on any other button a second time, even the same it returns to the img.
I tried to compare to the previous value of the state but I don't think I did it right
答案1
得分: 1
以下是翻译好的内容：
在代码中存在语法错误。在switch语句中，case不应在括号内包含赋值操作（=）。
const secTwo = (value, active) => {
if (active) {
switch (value) {
case 0:
return <img src={secThee} draggable="false" />;
case 1:
return (
<div className="hidden-content-one hidden-content">
<p className="hidden-title">title1</p>
<p className="hidden-para">title 1 para</p>
</div>
);
case 2:
return (
<div className="hidden-content-two hidden-content">
<p className="hidden-title">title 2</p>
<p className="hidden-para">title 2 para</p>
</div>
);
case 3:
return (
<div className="hidden-content-three hidden-content">
<p>title 3</p>
</div>
);
case 4:
return (
<div className="hidden-content-four hidden-content">
<p>title 4</p>
</div>
);
case 5:
return (
<div className="hidden-content-five hidden-content">
<p>title 5</p>
</div>
);
case 6:
return (
<div className="hidden-content-six hidden-content">
<p>title 6</p>
</div>
);
default:
return <img src={secThee} draggable="false" />;
}
} else {
return <img src={secThee} draggable="false" />;
}
};
英文:
There is a syntax error in the code. In the switch statement, the cases should not have an assignment operation (=) inside the parentheses.
const secTwo = (value, active) => {
if (active) {
switch (value) {
case 0:
return <img src={secThee} draggable="false" />;
case 1:
return (
<div className="hidden-content-one hidden-content">
<p className="hidden-title">title1</p>
<p className="hidden-para">title 1 para</p>
</div>
);
case 2:
return (
<div className="hidden-content-two hidden-content">
<p className="hidden-title">title 2</p>
<p className="hidden-para">title 2 para</p>
</div>
);
case 3:
return (
<div className="hidden-content-three hidden-content">
<p>title 3</p>
</div>
);
case 4:
return (
<div className="hidden-content-four hidden-content">
<p>title 4</p>
</div>
);
case 5:
return (
<div className="hidden-content-five hidden-content">
<p>title 5</p>
</div>
);
case 6:
return (
<div className="hidden-content-six hidden-content">
<p>title 6</p>
</div>
);
default:
return <img src={secThee} draggable="false" />;
}
} else {
return <img src={secThee} draggable="false" />;
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论