如何在没有类的反应中在函数中进行状态操作

Question

这是我的 React 工作区.js文件及其函数代替类

export default function WorkSection() {

现在我需要在这里做构造函数来初始化状态并执行函数操作，我将在单击按钮时调用这些操作

return (
<div className={classes.section}>
<GridContainer justify="center">
<GridItem cs={12} sm={12} md={8}>
<h2 className={classes.title}>Work with us</h2>
<h4 className={classes.description}>
BAIOS BAY LLP is looking for collaborations with you, Contact us
today !
</h4>
<form onSubmit={this.handleSubmit}>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
labelText="Your Name"
id="name"
onChange={this.handleChange}
defaultValue={this.state.name}
formControlProps={{
fullWidth: true
}}
/> </GridItem>   </GridContainer>
</div>
);
}

这是我提交名称的表单，并将添加按钮单击，因此我如何初始化状态和函数以调用onclick函数 我的函数是：

constructor(props) {
super(props);
this.state = {
name : ''}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
handleClick = event => {
this.setState({
[event.target.id]: event.target.checked
});
}
handleSubmit = event => {
event.preventDefault();
if (this.state.username === '') {
this.showMessage('Info', "Username is empty");
return;
}
}

我需要放置这个函数，我用类工作节做了，但如何使用导出默认函数 Worksection(( 来做到这一点

Answer 1

你可能正在寻找的东西叫做反应钩子。它们允许您在功能组件中使用状态管理。它们很酷，因为与类组件相比，它们很轻量级。

首先，从react导入useState函数：

import { useState } from 'react'

然后，在您返回之前，添加以下行：const [name, setName] = useState('');

这里的第一个参数是状态属性的名称，第二个参数是更改它的函数。

所以，取而代之的是：

handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}

写这个：

handleChange = event => {
setName(event.target.value);
}

如果你想让它更复杂，你可以从这里重写你的钩子：

const [name, setName] = useState('');

对此：

const [state, setState] = useState({
name: '',
checked: false,
});

Answer 2

export default function WorkSection() {
const { register, handleSubmit } = useForm();
const onSubmit = data => {
axios
.get(" 
...................... my code ...............

我的输入表单是：

return (
<div className={classes.section}>
<form onSubmit={handleSubmit(onSubmit)}>
<Input
name="Name"
placeholder="Name"
inputRef={register}
fullWidth={true}
/>
<Input
name="email"
type="email"
placeholder="Email"
fullWidth={true}
inputRef={register({ required: true })}
/>
<Input
name="contact"
placeholder="Contact"
fullWidth={true}
inputRef={register({ required: true })}
/>         
<Input
name="description"
placeholder="Message"
multiline={true}
fullWidth={true}
inputRef={register({ required: true })}
/>
<button className="btnColor" justify="center" type="submit">
Send Message
</button>
</GridItem>
</GridContainer>
</form>
</div>     

基本上我用了

inputRef={register}

以及上述其他部分。 正确的代码，对我有用~