有没有办法改变 React 中输入的类型？

Question

所以我尝试了以下方法，我似乎无法更改输入的类型。所以相同的输入可以是文本或密码类型，但我不能在两者之间切换。这是一个语义 UI 输入。 （来自语义-ui-react）

   const [inputType, setInputType] = useState('password'||'text')

在我的 JSX 中：

   <Input type={inputType} value={inputValue} onChange={handleInput} className="landingInput" placeholder={inputPlaceholder} />

初始化时：

  setInputType('text'); 

事件之后：

  setInputType('password'); // should update html template with type="password" but it doesn't

useEffect 用于确保状态更新，其他所有钩子都按预期工作。这可能是一种安全预防措施吗？你能想出避免创建新输入的方法吗？

谢谢

Answer 1

切换输入类型很容易， 这里我使用一个按钮将输入类型切换为text 和password。 检查工作演示Here。

检查更新的代码块

const App=()=>{
  const [inputType, setInputType] = useState('text');
  const inputPlaceholder = 'Add Here';
  const handleInput =()=>{}

  const toggleInput = ()=>{
setInputType(inputType === 'password' ? 'text': 'password')
  }
    return (
      <div>
        <input type={inputType} value="password" onChange={handleInput} className="landingInput" placeholder={inputPlaceholder} />
        <button onClick={toggleInput} >Toggle type</button>
      </div>
    );
}