一受控组件的基本使用

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-受控组件和非受控组件使用相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
React-表单处理（受控组件，非受控组件）
受控组件: value值受到了react状态控制的表单元素 React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值非受控组件: 非受控组件借助于re ...
React---什么是受控组件、非受控组件
受控组件: 在随后的用户输入中,能够控制表单中输入元素的组件被称为受控组件,即每个状态更改都有一个相关联的处理程序. 例如,我们使用下面的 handleChange 函数将输入框的值转换成大写: ha ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
【REACT-受控组件和非受控组件】
REACT-受控组件和非受控组件概述受控组件非受控组件受控组件应用ToDoList 概述 React中的组件根据是否受React控制可分为受控的和非受控的. React 中的受控组件和非受控组 ...
React的受控组件和非受控组件
一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...

14-受控组件和非受控组件使用

一受控组件的基本使用

二受控组件-select使用

三受控组件-多参数使用

四非受控组件

14-受控组件和非受控组件使用相关推荐

最新文章

热门文章

14-受控组件和非受控组件使用

一 受控组件的基本使用

二 受控组件-select使用

三 受控组件-多参数使用

四 非受控组件

14-受控组件和非受控组件使用相关推荐

最新文章

热门文章

一受控组件的基本使用

二受控组件-select使用

三受控组件-多参数使用

四非受控组件