-4

Estou iniciando em React depois de estudar Javascript e tentando fazer uma coisa bem simples, que é escrever um nome eu um input e aparecer na página.

import React from 'react';

function App() {
  return (
    <form>
      <h2>Preencha seu Nome</h2>
      <input type="text" />
      <button type="submit">Adicionar Nome</button>
    </form>
  );
}

export default App;
5

1 Resposta 1

0

Para ter o efeito esperado e digitar na caixa de texto e mostrar o resultado tem que usar o useState para guardar o estado atual e no evento onChange do <input /> alterar esse estado, exemplo minimo:

function App() {
  const [name, setName] = React.useState('');
  return (
    <div>
      <h1>{name}</h1>
      <div>
        <input 
          type="text" 
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </div>
    </div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Se quiser que isso aparece a partir do evento onSubmit de um formulário, precisa envolver dentro de um tag form os elementos e fazer uma referencia a tag <h1> com useRef() e a partir do submeter do formulário resgate o valor da variável de estado e enviar por referencia para o h1, exemplo:

function App() {
  const [name, setName] = React.useState('');
  const refH1 = React.useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    refH1.current.innerHTML = name;
  }
  return (
    <div>
      <h1 ref={refH1}></h1>
      <div>
        <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={name}
          onChange={e => setName(e.target.value)}
        />
        <button>Enviar</button>
        </form>
      </div>
    </div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

3
  • é exatamento isso que eu estava procurando...na verdade era o onChange que faltava 6/11/2020 às 16:33
  • e se eu quiser colocar um botão e acionar essa renderizaão somente após o submit? 6/11/2020 às 17:05
  • @lucas-eugenio1990 eu fiz um segundo exemplo.
    – novic
    6/11/2020 às 21:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .