Botão Limpar
Parte da seção Fundamentos do Journey de React da Coddy — lição 31 de 42.
Aqui está o superpoder do input controlado: como o estado é dono do texto, seu código pode alterar a caixa, não apenas o usuário. Redefina-o de qualquer lugar:
<button onClick={() => setName('')}>Clear</button>Defina o estado para uma string vazia e a caixa se esvazia no próximo render, porque value={name} sempre exibe o estado. Com um input não controlado você estaria acessando o DOM manualmente; com o estado é apenas uma chamada de setter.
Desafio
MédioConclua o compositor de mensagens.
- Faça o input (
id="message") ser controlado com o estadomessage. - Mostre o rascunho no parágrafo (
id="draft"): o textoDraft:seguido pela mensagem. - O botão
id="clear"limpa 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