1

仍然是 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;
4

2 回答 2

0

您需要使用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;
于 2020-03-20T05:36:23.620 回答
0

Input 中的 onChange 处理程序必须是这样的：

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

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

于 2020-03-20T05:42:50.843 回答