javascript - React TypeScript : How to get form values, 和使用 fetch 的响应代码

Question

我已成功将电子邮件和密码硬编码到提取请求中，但我想从表单中获取值。

另外，当我收到响应时，如何检查响应代码是 200 还是 400？

import React, { useState } from 'react';
import loading from '../images/loading.svg';

const ButtonSpinner: React.FC = () => {
const [state, setState] = useState({loading: false});
async function submitForm() {
    setState({ ...state, loading: true});
    const response = await fetch(`http://127.0.0.01/user/register`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({email: 'test@gmail.com', password: 'test'})
    });
    const content = await response.json();
    setState({ ...state, loading: false});
  }

return (
  <span>
    <label>Email</label>
    <input type="input" id='email'></input>
  </span>
  <span>
    <label>Password</label>
    <input type="password" id="password"></input>
  </span>   
  <button className="btn-join" onClick={submitForm}>
     {!state.loading ? 'Join Now!' : <img src={loading} alt="loading" />} 
  </button>       
);
}
export {ButtonSpinner};

Answer 1

使用 onChange 并将用户值保存到状态。

 const [formData, setFormData] = useState({email: "", password: ""})

 handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({...formData, [e.target.name]: e.target.value})
 }

在输入中添加名称，以便 e.target.name 知道要更改的内容

<input type="input" id='email' name="email" onChange={handleChange}></input>

然后您可以重用 formData 中的数据。如果你想检查响应代码，你可以直接console.log(response)并检查HTTP代码。