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

Question

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

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

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

Is there a way to change the type of an input in React?

html

javascript

reactjs

semantic-ui-react

use-state