使用 react with next js 从数据中检索 HTML FORM 数据答案

【问题标题】：Retrieve HTM FORM Data from data using react with next js使用 react with next js 从数据中检索 HTML FORM 数据
【发布时间】：2023-02-11 17:38:07
【问题描述】：

我有一个用例，其中源站点将下面提到的表单数据发布到第二个网站，我想在第二个网站中显示，该网站是在 react 和下一个 js 中实现的。

感谢您的帮助，因为我是 React 框架的新手。

<form action='www.mysite.com/test' method="post">
<input type='Hidden' name='SecureID' value='240127915991'/>
<input type="submit" value="Submit">

【问题讨论】：

你是指API实现吗？
@MahdiSamavi 在反应这是我的第二个网站我想打印 SecureID 值

标签： reactjs next.js form-data

【解决方案1】：

在您的 POST 请求将数据发送到 www.mysite.com/test 之前，您可以使用来自 react 的 useState Hook 在每次更改后保存输入。

const Component = () => {
  
  const [formValue, setFormValue] = useState("");

  return (
    <div>
      <form action='www.mysite.com/test' method="POST">
        <input type='hidden' name='SecureID' value='240127915991'/>
        <input type='text' name='text-field' defaultValue={formValue} placeholder='enter something' onChange={() => setFormValue(event.target.value)}/>
        <input type="submit" value="Submit"/>
      </form>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

您可以随时使用formValue 访问该值。

【讨论】：