Есть ли способ изменить тип входа в React? - PullRequest
Новая
       13

Есть ли способ изменить тип входа в React?

0 голосов
/ 25 февраля 2020

Итак, я попробовал следующее, я не могу изменить тип входа. Таким образом, один и тот же ввод может иметь тип текста или пароль, но я не могу переключаться между ними. Это пользовательский интерфейс Semanti c. (из semanti c -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 используется для того, чтобы убедиться, что состояние обновляется, все остальные ловушки работают должным образом. Может ли это быть мерой безопасности? Можете ли вы придумать способ избежать создания нового ввода?

Спасибо

1 Ответ

1 голос
/ 25 февраля 2020

Переключение типа ввода легко, здесь я использовал кнопку для переключения типа ввода на text и password. проверить рабочую демонстрацию Здесь .

Проверить обновленный код блока 

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