如何使用钩子将类组件实现为功能组件？
如何使用钩子将类组件实现为功能组件？
提问于 2020-06-27 23:46:11
我正在创建一个注册表单，其中有多个字段，FirstName，姓氏，电子邮件和密码：
代码：
class Sign Up extends Component {
state={
firstName: '',
lastName: '',
email: '',
password: '',
}
handleChange(e){
this.setState({
[e.target.id]: e.target.value
})
}
return (
<form onSubmit={handleSubmit}>
<h5>Sign Up</h5>
<div className="input-field">
<label htmlFor="firstName">First Name</label>
<input type="text" id="firstName" onChange={handleChange}/>
</div>
<div className="input-field">
<label htmlFor="lastName"></label>
<input type="text" id="lastName" onChange={handleChange}/ >
</div>
<div className="input-field">
<label htmlFor="email"></label>
<input type="email" onChange={handleChange} />
</div>
<div className="input-field">
<label htmlFor="password"></label>
<input type="password" onChange={handleChange} />
</div>
<button className="btn pink z-depth-0 lighten-1 text-grey">Sign up</button>
</form>
)}
我试着把它转换成一个功能组件，在状态部分我能做的就是：
const [firstName, setFirstName] = useState('');
const [lastName, setLAstName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');然后为每一个都设置一个不同的函数来改变状态，而不是在类组件中设置一个函数handleChange：
const handleFirstNameChange = (e) => {
setFirstName(e.target.value)
}
const handleFirstNameChange = (e) => {
setLastName(e.target.value)
}
const handleEmailChange= (e) => {
setEmail(e.target.value)
}
const handlePasswordChange= (e) => {
setPassword(e.target.value)
}这很冗长，有没有办法用钩子在经典组件中实现相同的东西？？
回答 3
Stack Overflow用户
发布于 2020-06-27 23:59:54
在使用functional component时，您不需要将状态拆分为多个状态，特别是在以您所做的方式处理表单时，您只需执行以下操作：
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
const SignUp = () => {
const [state, setState] = React.useState({
firstName: '',
lastName: '',
email: '',
password: '',
})
const handleChange =(e) => {
e.persist();
setState(prevState => ({
...prevState,
[e.target.id]: e.target.value
}));
}
const handleSubmit = () => {
console.log(state);
}
return (
<form onSubmit={handleSubmit}>
<h5>Sign Up</h5>
<div className="input-field">
<label htmlFor="firstName">First Name</label>
<input type="text" id="firstName" onChange={handleChange}/>
</div>
<div className="input-field">
<label htmlFor="lastName">Last name</label>
<input type="text" id="lastName" onChange={handleChange}/ >
</div>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={handleChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={handleChange} />
</div>
<button className="btn pink z-depth-0 lighten-1 text-grey">Sign up</button>
</form>
)
}
render(<SignUp />, document.getElementById('root'));我只是为电子邮件和assword jsx节点添加了缺少的id，并将状态更改为使用useState，但保留了之前在类组件中定义的形状。通过这种方式，您无需进行太多更改即可使其像以前一样工作。
Stack Overflow用户
发布于 2020-06-27 23:59:18
只需在React.usState中存储一个对象
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: '',
password: '',
});然后对您的handleChange函数使用相同的逻辑：
function handleChange(e) {
setFormData({ ...formData, [e.target.id]: e.target.value })
}Stack Overflow用户
发布于 2020-06-28 00:21:02
您可以使用useReducer完成此操作：
import React, { useReducer } from "react";
const SignUp = () => {
function reducer(currentState, newState) {
return { ...currentState, ...newState };
}
const [{ firstName, lastName, email, password }, setState] = useReducer(
reducer,
{
firstName: "",
lastName: "",
email: "",
password: ""
}
);
const handleSubmit = event => {
event.preventDefault();
console.log("firstName: ", firstName);
console.log("lastName: ", lastName);
console.log("email: ", email);
console.log("password: ", password);
};
return (
<form onSubmit={handleSubmit}>
<h5>Sign Up</h5>
<div className="input-field">
<label htmlFor="firstName">First Name</label>
<input
type="text"
value={firstName}
id="firstName"
onChange={e => setState({ firstName: e.target.value })}
/>
</div>
<div className="input-field">
<label htmlFor="lastName">Last Name</label>
<input
type="text"
value={lastName}
id="lastName"
onChange={e => setState({ lastName: e.target.value })}
/>
</div>
<div className="input-field">
<label htmlFor="email">Email</label>
<input
type="email"
value={email}
onChange={e => setState({ email: e.target.value })}
/>
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input
type="password"
value={password}
onChange={e => setState({ password: e.target.value })}
/>
</div>
<button className="btn pink z-depth-0 lighten-1 text-grey">
Sign up
</button>
</form>
);
};
export default SignUp;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62612118
复制相关文章
相似问题
腾讯云开发者
