javascript - 为所有输入类型创建通用文本框

Question

由于我是 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;

我的 Prop 通过以下代码获取:

<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> }

Answer 1

将您的密码条件更改为以下代码

  {(type==='password' || type=== 'input') && 
  <div>
    <p>This is Password</p>
      <span onClick={showHide}>
        {type === 'input' ? 'Hide' : 'Show'}
      </span>
  </div>}