Como limpar o valor de um campo de entrada em um componente funcional sem usar o estado?

Christian Strand

Eu tenho um campo de entrada e cuido da entrada via onKeyUp (pois preciso acessar event.which). Isso funciona muito bem na medida em que apenas pego o conteúdo da entrada via, event.target.valuemas encontro problemas quando tento redefinir o valor do campo de entrada.

Estou usando componentes funcionais, portanto, acessar a entrada via refs não é possível e todos os exemplos que encontrei com useRef apenas mostram como enfocar o campo de entrada, mas não como limpá-lo.

Esqueci de mencionar que estou usando Material-UI.

Chris B.

Você pode limpar o valor de uma entrada com um ref dentro de um componente funcional, definindo ref.current.valueimperativamente para uma string vazia:

const App = () => {
  const textInput = React.useRef();

  const clearInput = () => (textInput.current.value = "");

  return (
    <>
      <input type="text" ref={textInput} />
      <button onClick={clearInput}>Reset</button>
    </>
  );
}

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

O valor da caixa de entrada pode ser definido como uma string vazia ao clicar no botão enviar quando a entrada estiver em um componente funcional sem estado?

Como posso obter o valor de uma entrada em um clique de botão em um componente React sem estado?

Como acessar o estado de um componente funcional de outro componente funcional em react-native?

Componente funcional de reação: botão ativar / desativar com base em um valor de estado

Como preencher um valor de entrada com javascript puro em um componente ReactJS sem estado?

Como preencher um valor de entrada com javascript puro em um componente ReactJS sem estado?

Como renderizar um componente funcional sem estado de outro componente

Como limpar o estado em reação ao `onKeyDown` em um formulário de entrada?

Como useState () em react recupera o objeto de estado correto e a função de um componente funcional ao usar o gancho de estado?

Como definir dinamicamente o estado com o manipulador de eventos onChange em um componente funcional

Como transformar um componente de classe em um componente sem estado de função?

Como executar a mudança em um componente sem definir o estado em um aplicativo de reação?

Como limpar ou alterar o texto de um campo de entrada ao selecionar um valor de opção?

Como testar o estado de um componente funcional em React with Jest (No Enzyme)

Como usar o estado em um componente?

Como faço para atualizar o estado de um componente funcional de um componente de classe para exibir itens de um mapa em reação

Posso usar um componente Angular personalizado como espaço reservado para um campo de entrada

Como posso usar o Jest para testar uma função dentro de um componente sem estado?

Qual é o tipo de retorno de fluxo de um componente funcional sem estado do React?

Como estender a interface TypeScript de adereços de um componente nativo em um componente funcional sem estado no React Native?

Como usar defaultValue na tag de seleção em um componente funcional?

Como usar defaultValue na tag de seleção em um componente funcional?

Tentando usar o valor de um campo como rótulo para outro campo de entrada

Como modificar ou enviar o estado de um componente filho para o pai (com componente funcional)

Inicialização de estado dentro de um componente funcional (sem loop infinito)

Como você usa o resultado de uma consulta graphql como um valor de retorno em um componente funcional react?

Como obter o valor de um campo de entrada (texto) sem document.getElementById ('..')

Convertendo componente React com estado em componente funcional sem estado: como implementar o tipo de funcionalidade "componentDidMount"?

Convertendo componente React com estado em componente funcional sem estado: como implementar o tipo de funcionalidade "componentDidMount"?

TOP lista

quentelabel

Arquivo