Botão Limpar
Parte da seção Fundamentos do Journey de React da Coddy. Lição 31 de 42.
Aqui está o superpoder da entrada controlada: como o estado é o dono do texto, seu código pode alterar a caixa, não apenas o usuário. Redefina-a de qualquer lugar:
<button onClick={() => setName('')}>Clear</button>Defina o estado como uma string vazia e a caixa se esvazia na próxima renderização, porque value={name} sempre exibe o estado. Com uma entrada não controlada, você estaria acessando o DOM manualmente; com estado, basta uma chamada ao setter.
Desafio
MédioFinalize o compositor de mensagens.
- Faça com que a entrada (
id="message") seja controlada pelo estadomessage. - Mostre o rascunho no parágrafo (
id="draft"): o textoDraft:seguido pela mensagem. - O botão
id="clear"esvazia a mensagem.
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentos
1Conheça o React
O que é o React?Seu primeiro componenteRegra do elemento pai únicoJSX não é HTMLRecapitulação: Conheça o React