在反應 js 聯系表格中向 api 發布數據

Question

我正在嘗試通過反應將數據發送到我的聯系表格 api 但我遇到了這個問題

當單擊提交按鈕時，我嘗試將輸入作為值通過 api 發布，但它不起作用錯誤 = api 應該像這樣調用https://secretxxxxx-acapi/-contactus.com.com.org 46a0-9c81-d48a1322f4bb&fname=test&email=test@test.com&mobile=8463274946&message=test

但它像這樣調用http://localhost:3000/?name=dfdfsd&email=dsffdsf%40gmail.com&phone=937285294&website=sxascsac&message=dscdscsfgcd#

我的代碼

 import React from 'react'; const ContactForm = (props) => { const { submitBtnClass } = props; function handleClick() { // Send data to the backend via POST fetch('https://edu.orgiance.com/api/contactus?secret=f1794e34-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test@test.com&mobile=8463274946&message=', { // Enter your IP address here method: 'POST', mode: 'cors', body: JSON.stringify(jsonData) // body data type must match "Content-Type" header }) } var jsonData = { "contact": [ { "fname": props.fname, "email": props.email, "mobile": props.phone, "message": props.message } ] } return ( <form id="contact-form" action="#"> <div className="row"> <div className="col-md-6 mb-30"> <input className="from-control" type="text" id="name" name="name" placeholder="Name" value={props.fname} required /> </div> <div className="col-md-6 mb-30"> <input className="from-control" type="text" id="email" name="email" placeholder="E-Mail" value={props.email} required /> </div> <div className="col-md-6 mb-30"> <input className="from-control" type="text" id="phone" name="phone" placeholder="Phone Number" value={props.phone} required /> </div> <div className="col-md-6 mb-30"> <input className="from-control" type="text" id="website" name="website" placeholder="Your Website" required /> </div> <div className="col-12 mb-30"> <textarea className="from-control" id="message" name="message" placeholder="Your message Here" value={props.message}></textarea> </div> </div> <div className="btn-part" > <button onClick={handleClick} className={submitBtnClass? submitBtnClass: 'readon learn-more submit'} type="submit">Submit Now </button> </div> </form> ); } export default ContactForm;

Answer 1

你的代碼有幾個問題：

• jsonData永遠不會更新，因為對 state 或 prop 的任何更新都會重新呈現您的 function 並因此重新初始化jsonData
• 在input或textarea上設置的任何value都需要onChange處理程序。 沒有它，您甚至無法在相應的元素中輸入任何內容。 有關詳細信息，請參閱https://reactjs.org/docs/forms.html#controlled-components 。

要使您的代碼正常工作， jsonData更改為使用props數據初始化的 state。 為了做一個更簡單的例子，我將使用contact作為 state 並去掉數組：

import React, { useState } from "react";

const ContactForm = (props) => {
  const { submitBtnClass, ...other } = props;
  const [contact, setContact] = useState({
    fname: "",
    email: "",
    mobile: "",
    message: "",
    ...other
  });

  function handleClick() {
    // Send data to the backend via POST
    fetch(
      "https://edu.orgiance.com/api/contactus?secret=f1794e34-ac40-46a0-9c81-d48a1322f4bb&fname=test&email=test@test.com&mobile=8463274946&message=",
      {
        // Enter your IP address here

        method: "POST",
        mode: "cors",
        body: JSON.stringify(contact) // body data type must match "Content-Type" header
      }
    );
  }

  function setContactData(e) {
    const name = e.currentTarget.name;
    const value = e.currentTarget.value;

    setContact((prev) => {
      return {
        ...prev,
        [name]: value
      };
    });
  }

  return (
    <form id="contact-form" action="#">
      <div className="row">
        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="name"
            name="fname"
            placeholder="Name"
            value={contact.fname}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="email"
            name="email"
            placeholder="E-Mail"
            value={contact.email}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="phone"
            name="phone"
            placeholder="Phone Number"
            value={contact.phone}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-md-6 mb-30">
          <input
            className="from-control"
            type="text"
            id="website"
            name="website"
            placeholder="Your Website"
            value={contact.website}
            onChange={setContactData}
            required
          />
        </div>

        <div className="col-12 mb-30">
          <textarea
            className="from-control"
            id="message"
            name="message"
            placeholder="Your message Here"
            value={contact.message}
            onChange={setContactData}
          ></textarea>
        </div>
      </div>

      {JSON.stringify(contact)}

      <div className="btn-part">
        <button
          onClick={handleClick}
          className={
            submitBtnClass ? submitBtnClass : "readon learn-more submit"
          }
          type="submit"
        >
          Submit Now{" "}
        </button>
      </div>
    </form>
  );
};

const App = () => {
  return <ContactForm message={"test"} />;
};

export default App;