Как по клику на кнопку изменить type в input?

Question

[jeka-3]

Как по клику на кнопку изменить type в input ? К примеру из type="password" на type="text"

Answer 1

[Тигран Абрамян]

Answer 2

[0xD34F]

Возможные типы сложить в массив:

const types = [ 'text', 'password', 'number' ];

Завести стейт под текущий тип:

const [ type, setType ] = useState('text');

<input type={type} />

Обновлять его при взаимодействии с элементами управления:

const onTypeChange = e => setType(e.target.value);

Которые могут быть обычными кнопками:

{types.map(n => (
  <input
    type="button"
    value={n}
    className={n === type ? 'active' : ''}
    onClick={onTypeChange}
  />
))}

Или радио:

{types.map(n => (
  <label>
    <input
      type="radio"
      value={n}
      checked={n === type}
      onChange={onTypeChange}
    />
    {n}
  </label>
))}

Или это может быть select:

<select value={type} onChange={onTypeChange}>
  {types.map(n => <option>{n}</option>)}
</select>

А ещё можно сделать кнопку, которая будет по кругу переключать типы:

<button onClick={() => setType(types[(types.indexOf(type) + 1) % types.length])}>
  next type
</button>

https://jsfiddle.net/y7r8xv9b/

Answer 3

[Kirill Makarov]

Создаешь стейт const [isType, setIsType] = useState(true)
При клике вызываешь функцию
В которой setIsType(s => !s)
А в инпуте пишешь type={isType ? "password" : "text"}