14

一 受控组件的基本使用

import React, { PureComponent } from 'react';class App extends PureComponent {constructor(props) {super(props)this.state = {username: ''}}render() {return (<div><form onSubmit={ e => this.handleSubmit(e) }><label htmlFor="username">{/*受控组件*/}用户：<input type="text"id='username'value={ this.state.username }onChange={ e => this.handleChange(e)}/></label><input type="submit" value="提交" /></form></div>);}handleSubmit(e) {e.preventDefault();console.log(this.state.username)}handleChange(e) {console.log(e.target.value)this.setState({username: e.target.value})}
}export default App;

 二 受控组件-select使用

 

/** @Description: * @Version: 2.0* @Autor: sun* @Date: 2022-10-18 00:20:50* @LastEditTime: 2022-10-18 00:54:46*/
import React, { PureComponent } from 'react';
class App extends PureComponent {constructor(props) {super(props)this.state = {fruits: '西瓜'}}render() {return (<div><form onSubmit={ e => this.handleSubmit(e) }><label htmlFor="username">{/*受控组件*/}<select name="fruits"onChange={e=>this.handleChange(e)}value={this.state.fruits}><option value="香蕉" label="香蕉"></option><option value="苹果" label="苹果"></option><option value="西瓜" label="西瓜"></option></select></label><input type="submit" value="提交" /></form></div>);}handleSubmit(e) {e.preventDefault();console.log(this.state.fruits)}handleChange(e) {console.log(e.target.value)this.setState({fruits: e.target.value})}
}export default App;

三 受控组件-多参数使用

 

/** @Description: * @Version: 2.0* @Autor: sun* @Date: 2022-10-18 00:33:11* @LastEditTime: 2022-10-18 00:56:30*/
import React, { PureComponent } from 'react';class App extends PureComponent {constructor(props) {super(props)this.state = {username: '',password: '',age: ''}}render() {return (<div><div><form><label htmlFor="username">用户：<input type="text" id='username' name="username"  value={ this.state.username }  onChange={ e => this.handleChange(e)}/></label></form></div><div><form><label htmlFor="password">密码：<input type="text"  id='password'   name="password"  value={ this.state.password }  onChange={ e => this.handleChange(e)}/></label></form></div><div><form><label htmlFor="age">{/*受控组件*/}年龄：<input type="text" id='age' name="age" value={ this.state.age }   onChange={ e => this.handleChange(e)}/></label></form></div><input type="submit" value="提交"  onClick={ e => this.handleSubmit(e) }/></div>);}handleSubmit(e) {e.preventDefault();const { username, password, age } = this.stateconsole.log(username, password, age)}handleChange(e) {this.setState({//计算属性名称[e.target.name]: e.target.value})}
}export default App;

 四 非受控组件

 

/** @Description: * @Version: 2.0* @Autor: sun* @Date: 2022-10-18 00:40:12* @LastEditTime: 2022-10-18 00:57:39*/
import React, { PureComponent, createRef } from 'react';class App extends PureComponent {constructor(props) {super(props)this.state = {username: ''}this.usernameRef = createRef()}render() {return (<div><form onSubmit={e=> this.handleSubmit(e)}><label htmlFor="username">{/*受控组件*/}用户：<input type="text" id='username' ref={this.usernameRef}/></label><input type="submit" value="提交" /></form></div>);}handleSubmit(e) {e.preventDefault();console.log(this.usernameRef.current.value)}handleChange(e) {console.log(e.target.value)this.setState({username: e.target.value})}
}export default App;