useState 接收输入数据和 post 到控制台

Question

我还是 React 的大三学生，我正在尝试检测来自前端的输入并使用 useState 收集输入数据并通过控制台 post。我遵循了 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

您需要使用 useEffect 来跟踪对输入值（或任何状态值）的任何更改。下面的link也解释了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;

Answer 2

您在 Input 中的 onChange 处理程序需要像这样：

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

您可以按照上一个答案中的建议使用 useEffect，但这并不重要。

useState 接收输入数据和 post 到控制台

useState to receive input data and post to console

input

reactjs

use-state