在反應 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

看起來您正在創建一個功能性無狀態組件。 這意味着您的數據需要在 props object 中傳遞，如果您嘗試在 ContactForm 組件中的任何位置訪問它，則需要使用以下格式：props. 變量名。 IE：

<input className="from-control" type="text" id="name" name="name" placeholder="Name"  value={props.fname}required />

Answer 2

所有這些變量都是未定義的。 您無法使用不存在的變量初始化 jsonData object，您也無法設置<input value={undefinedVariable}... />

由於您使用的是表單，因此很容易將其更改為如下所示：

<form onSubmit={this.handleClick}>
  ...
  <input type="submit" value="Submit" />
</form>

然后您可以從鼠標事件訪問表單數據。

例子：

 function handleClick(event) { event.preventDefault(); const form = event.target; const jsonData = { "fname": form.name, "email": form.email, "mobile": form.phone, "message": form.message }; fetch('https://edu.orgiance.com/api/contactus?secret=f1794exxxxxx', method: 'POST', mode: 'cors', body: JSON.stringify(jsonData) }) }