在 React.js 中将图像切换为文本 onClick

Question

我搜索过类似的问题，但我不明白我做错了什么。

我正在尝试从照片切换到文本 onClick，这样当我单击照片时显示的是文本，而不是图像。但是当我点击照片时出现错误："setToggleImage is not a function".

我几乎可以肯定我遗漏了一些东西，但我看不到它。这是代码，非常感谢在我发疯之前的任何帮助：

import React, { useState } from 'react';
import Image from 'react-bootstrap/Image';
import profilePhoto from '../images/_MG_9807.JPG';

const contactInfo = {
    title: 'Contact: ',
    email: 'email: xxx@gmail.com',
    Github:  ' Github: ', 
    linkedin: 'linkedin: ',
};

const ImageContactDetails = () => {
    const [ toggleImage, setToggleImage ] = useState(true);

    return (
        <div>
            <div className='imageContactDetails' onClick={() => setToggleImage(!toggleImage)} > 
                { toggleImage ? <Image id='imageDetails' src={profilePhoto}   alt='professionalprofile' /> : 
                <div>   
                    <h4> {contactInfo.title} </h4>
                    <h5> {contactInfo.email} </h5>
                    <h5> {contactInfo.Github} </h5>
                    <h5> {contactInfo.linkedin} </h5>
                </div>   
                }
            </div>
            <div id='contactInfo'></div>
        </div>
    )
}
export default ImageContactDetails;

Answer 1

useState() returns 数组中的一对值，所以你应该使用数组解构。应该是：

const [toggleImage, setToggleImage] = useState(true);

在 React.js 中将图像切换为文本 onClick

Switch image to text onClick in React.js

javascript

toggle

reactjs

react-hooks

react-functional-component