Prenons un composant enregistré comme exemple
class Register extends Component {
constructor(props){
super(props)
this.state = {
username:'',
password:'',
password2:'',
type:'求职者'
}
}
Si vous souhaitez modifier les valeurs des quatre attributs d'état via la même méthode handleChange, vous devez passer dynamiquement les paramètres d'attribut, écrire d'abord un mauvais endroit et voir ce qui se passe
handleChange(name,val){
this.setState({
name:val
})
}
En fait, si le nom dans le code en vscode n'est pas surligné, c'est-à-dire que Ming n'est pas du tout utilisé, c'est aussi un rappel
transfert
<InputItem onChange={(val)=>{this.handleChange('username',val)}} placeholder="请输入用户名">用户名:</InputItem>
<InputItem onChange={(val)=>{this.handleChange('password',val)}} type='password' placeholder="请输入密码">密码:</InputItem>
En conséquence, le rappel est le suivant, et la requête ajax n'est pas envoyée
Modifiez la méthode handleChange en ajoutant des crochets au nom
handleChange(name,val){
this.setState({
[name]:val
})
}
Le nom est mis en évidence dans vscode
Demande envoyée en douceur