我正在学习如何使用React,并开始使用类,并决定转换为使用Hooks。我相信我已经正确地配置了所有内容,但是我不确定如何使用useEffect构造axios.post来处理多个用户输入。
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Signup = () => {
const [customerSignUp, setCustomerSignUp] = useState([
{ email: '', password: '', firstName: '', lastName: ''}
]);
const handleChange = (event) => {
setCustomerSignUp(event.target.value)
}
const handleSubmit = (e) => {
e.preventDefault()
console.log(e)
}
useEffect(() => {
axios.post('/api/Customer/SignUp', {
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}, [])
我只包括了lastName,以显示我如何使用handleChange事件处理程序来更改客户的状态。
return (
<div className="container">
<form className='white' onSubmit={handleSubmit}>
<h5 className="grey-text.text-darken-3">Sign Up With Email</h5>
<div className="input-field">
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
</div>
<div className="input-field">
<button className="btn blue darken-3" type="submit">Sign Up</button>
</div>
</form>
</div>
);
}
export default Signup
实际上,您的axios
请求不一定要包含在useEffect()
您的注册功能中,最好将其保留在您的handleSubmit
函数中。您可以选择设置useEffect()
为在首次进行组件渲染后或对特定依赖项进行每次更改后触发一次。两者都不特别适合您的功能。
另外,让状态保存一个对象而不是对象数组似乎更有意义。从那里,您可以axios
像这样将状态放入请求中:
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Signup = () => {
const [customerSignUp, setCustomerSignUp] = useState(
{ email: '', password: '', firstName: '', lastName: ''}
);
const handleChange = (event) => {
setCustomerSignUp({...customerSignUp, [event.target.name]: event.target.value})
}
const handleSubmit = (e) => {
e.preventDefault()
axios.post('/api/Customer/SignUp', customerSignUp)
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
setCustomerSignUp({email:``,password:'',firstName:``,lastName:''})); }
还请记住为与状态中的字段相对应的每个输入赋予名称属性。(看起来您已经拥有了)
return (
<div className="container">
<form className='white' onSubmit={handleSubmit}>
<h5 className="grey-text.text-darken-3">Sign Up With Email</h5>
<div className="input-field">
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
</div>
<div className="input-field">
<button className="btn blue darken-3" type="submit">Sign Up</button>
</div>
</form>
</div>
);
}
export default Signup
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句