大家好，我正在 React 中構建一個簡單的候補名單頁面。在英雄部分，我創建了一個帶有 H1 和表單的標題。輸入表單作業正常，當我聚焦時 css 被激活并且狀態被正確管理。但是，由于某種原因，表單中的反應按鈕不可點擊。有人可以請教嗎？
import React from 'react'
import './Hero.css'
import prlearn_logo from '../assets/prlearn_logo.png'
import { useState } from 'react'
import axios from 'axios'
function Hero(){
//managing state of input field
const [input, setInput] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
axios.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662-660693fecbbd,input')
.then(response => {
console.log(response)
})
}
return (
<div className="container">
<div className="heading">
<img className ="logo" src={prlearn_logo} alt="prlearn_logo" />
<h1 className="h1">Learn Spanish from native speakers and support the local community.
<br/>
<span>Feel at home by removing the language barrier.</span>
</h1>
</div>
<div className="waitlist">
<form onSubmit={handleSubmit}>
<input
type="text"
className="input-field"
placeholder="Enter email address"
required
value={input}
//changes input in state function
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit" className="button">Join The Waitlist</button>
</form>
</div>
</div>
)
}
export default Hero
uj5u.com熱心網友回復：
該按鈕效果很好。也許你應該看看 axios 請愿書。 https://codesandbox.io/s/silent-cherry-rqbn52?file=/src/App.js
uj5u.com熱心網友回復：
按鈕作業正常，您的代碼中有錯字。在呼叫 Api 時，您正在向錯誤的 url 發出請求。而不是對此提出請求：>
axios.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662-660693fecbbd,input')
.then(response => {
console.log(response)
})
嘗試這個
axios
.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662-
660693fecbbd')
.then((response) => {
console.log(response);
});
uj5u.com熱心網友回復：
按鈕作業正常。我是一名新手開發人員，沒有意識到您還必須手動包含游標指標才能獲得典型的點擊效果。axios 發布請求已被破壞，我仍在努力完成表單功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/495683.html
標籤：javascript html 反应 dom 状态
下一篇：正則運算式總是錯誤的多模式