JSFiddle - React, Tailwind, and code Playground

HTML

<a herf="#" id="mudar">Mudar Campo</a>

<div class="alternativos">
    <input type "text" name="nome" />
    <select name="nome" disabled="true">
        <option value="">Escolha 1</option>
    </select>
</div>

CSS

div {
    margin-top: 20px;
}
select {
    display: none;
}
#mudar {
    cursor: pointer;
    padding: 10px;
    transition: background-color .6s;
}
#mudar:hover {
    background-color: #ccf;
}

JavaScript

document.getElementById('mudar').addEventListener('click', substituir);

function substituir(e) {
    var input = document.querySelector('.alternativos input');
    var select = document.querySelector('.alternativos select');

    mudarEstado(input, !select.disabled);
    mudarEstado(select, select.disabled);
}

function mudarEstado(el, mostrar) {
    el.style.display = mostrar ? 'block' : 'none';
    if (mostrar) el.removeAttribute('disabled');
    else el.setAttribute('disabled', true);
}