时间戳

首页 > 解决方案 > React TypeScript：如何使用 fetch 获取表单值和响应代码

javascript - React TypeScript：如何使用 fetch 获取表单值和响应代码

问题描述

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

另外，当我收到响应时，如何检查响应代码是 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};

标签： javascriptreactjs

解决方案

使用 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) 并执行 if 检查 HTTP 代码。

推荐阅读