useState для получения входных данных и отправки на консоль

Question

Все еще младше с React, и я пытаюсь обнаружить входные данные от внешнего интерфейса и использовать useState, чтобы собрать входные данные и отправить их через консоль. Я следовал собственному учебнику React, но не могу понять это правильно. Это, наверное, что-то маленькое, что я забыл, но я застрял на этом в течение нескольких дней. Пожалуйста, помогите.

function Cards2() {

  const [input, setInput] = useState();
  console.log(input);

  return (
    <div id="cards" style={{width: 'auto', margin: '10px'}}>
    <div className="card-header" id="card-header" style={{backgroundColor: 'dimgray', color: 'white'}}>
      <h5>Header</h5>
    </div>
    <div className="card-body" id="card-body" style={{backgroundColor: 'lightgrey'}}>
      <blockquote className="blockquote mb-0">
        <p>Enter Name:</p>

                <input onChange={() => setInput(input)} type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/> 

                <button type="submit" className="btn btn-primary" style={{marginTop: '7px'}}> Submit </button>

        <footer className="blockquote-footer">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </div>
  </div>
  );
}
export default Cards2;

Answer 1

Ваш обработчик onChange в Input должен быть таким:

<input onChange={(event) => setInput(event.target.value)} type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>

Вы можете использовать useEffect, как предложено в предыдущем ответе, но это не имеет значения.

Answer 2

Вам нужно будет использовать useEffect для отслеживания любых изменений входного значения (или любого значения состояния, в этом отношении). Следующая ссылка также объясняет, как работает useEffect и как с ним работать. https://daveceddia.com/useeffect-hook-examples/

import React, { useState, useEffect } from 'react';

function Cards2() {

  const [input, setInput] = useState();

  useEffect(() => {
    console.log(input);
  }, [input]);

  return (
    // your code here
  );
}

export default Cards2;