由于我是 React JS 的新手，我需要支持為所有輸入類型創建一個通用文本框。此外，我已經開發了文本框，但是當類型為密碼時，我需要顯示密碼功能。但是，目前，當我第一次單擊它時，我的顯示密碼元素消失了。import React, { useState, useEffect } from 'react';const TextBox=(props)=> {const [type, setType] = useState('text');const [placeholder, setPlaceholder] = useState('Text');const [passValue, setPassValue] = useState();useEffect(() => {    setType(props.type);    setPlaceholder(props.placeholder);}, []);const handleChange=(e)=>{    setPassValue(e.target.value);}const showHide=(e)=>{    e.preventDefault();    e.stopPropagation();    setType(type === 'input' ? 'password' : 'input') }return (    <div>    <h1>{type}:{placeholder}</h1>    <input type={type} placeholder={placeholder} onChange={handleChange}></input>    {(type==='password', type=== 'input') &&         <div>            <p>This is Password</p>                <span onClick={showHide}>{type === 'input' ? 'Hide' : 'Show'}</span>        </div>    }    {(type==='text')&&<p>This is Text</p>}    {(type==='email')&&<p>This is an Email</p>}    </div>);}export default TextBox;我的道具正在通過以下代碼獲?。?lt;TextBox type="password" placeholder="Enter your Password"/>如何在左側的輸入文本中顯示顯示/隱藏，并保留上述代碼？<input class='container textContainer' type={type} placeholder={placeholder} onChange={handleChange} /> {(type==='password' || type=== 'input') && <span onClick={showHide}>     {type === 'input' ? 'Hide' : 'Show'} </span> }