如何使用 React 在按钮中附加"disable"属性

Question

我正在开发Reactjs/nextjs，我想添加/删除"disable"属性，我该怎么做?这是我当前的代码

const handleSubmit = (e) => {
e.preventDefault();
//Should append "disable" on submit button
axios
.post("xxxxxxxxxxxxxxxxxxxxxxxxxxx",data
)
.then(function (response) {
//Should remove "disable" after response
}
});
}
<form className="row" id="home_contact_form" onSubmit={handleSubmit}>
<input type="submit" value="send" className="sendbtn" id="sendbtn" />
</form>

Answer 1

您应该创建一个useState，在请求期间设置为true或false

的例子:

import "./styles.css";
import { useState } from "react";
export default function App() {
const [isDisabled, setIsDisabled] = useState(false);
const handleSubmit = () => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
setIsDisabled(true);
return response.json();
})
.then((json) => console.log(json))
.finally(() => setIsDisabled(false));
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button disabled={isDisabled} onClick={handleSubmit}>
Submit
</button>
</div>
);
}

Answer 2

你可以为这个作业创建一个布尔状态，最初，当handlessubmit函数被调用时，你的状态应该是false，然后将状态设置为true，一旦你从API得到响应，然后再次将状态更新为false。

那么你可以在你的输入

中使用这个状态

<input type="submit" value="send" className="sendbtn" id="sendbtn" disabled={isDisabled} />