一 受控組件的基本使用

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;

總結

以上是生活随笔為你收集整理的14-受控组件和非受控组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。