时间戳

首页 > 解决方案 > 如何将输入数据和复选框从表单发送到服务器？

javascript - 如何将输入数据和复选框从表单发送到服务器？

问题描述

 useEffect(() => {
    if(readyToSend){
    let data = {
        "email":"example.org",
        "newsletter": true
    };

    let jsonData = JSON.stringify(data);
    let encodedData = encodeURIComponent(jsonData);
    let url = "https://example/receiver/external" 
    let fetchUrl = url + "?datajsonstr=" + encodedData + "&_=" + (new Date()).valueOf();
    let datafetch = fetch(fetchUrl);

    datafetch.then(data => {
        props.setDataDone(true)
    })
}})

我不想硬编码我的代码中的值。这些值可能来自 Form (TextField)。

标签： javascriptreactjs

解决方案

您需要将输入的值存储在状态中，以便在提交表单时可以对状态进行字符串化，并将其上传到您的服务器。

这是一个带有模拟 API 的工作版本，这是代码。

const { useState } = React;

function mockApi(data) {
  return new Promise((res, rej) => {
    setTimeout(() => res(`${data} stored`), 2000);
  });
}

function Example() {

  // Set state as an object
  const [ form, setForm ] = useState({});

  // When the form is submitted call the API endpoint
  // with the JSON
  async function handleSubmit(e) {
    e.preventDefault();
    const msg = await mockApi(JSON.stringify(form));
    console.log(msg);
  }

  // Every time an input's value changes,
  // update the state
  function handleChange(e) {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  }

  return (
    <form onSubmit={handleSubmit} onChange={handleChange}>
      <input type="text" name="name" required />
      <input type="password" name="password" required />
      <button type="submit">Submit</button>
    </form>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读