React受控组件非受控组件

受控组件：广义上的说法是 react组件的数据渲染是被调用者传递的props完全控制

受控组件：statec成为唯一的数据源，不接受ref读取值

//非受控组件 不利于组件通信 局限性
export default class App extends Component {myref = React.createRefrender(){return(<div><input type="text" ref={myref} defaultValue='aaa'/> //这里必须用defaultValue否则input无法输入<button onClick={()=>{console.log(this.myref.current.value)}}>get</button><button onClick={()=>{this.myref.current.value = ''}}>reset</button></div>)}
}

//受控组件
export default class App extends Component {state ={msg='aaa'}render(){return(<div><input type="text" value={this.state.msg} onChange={(event)=>{console.log(event.target.value)this.setState({msg:event.target.value})//将值赋予给状态 保证受控 值发生改变时 会触发render}}/> <button onClick={()=>{console.log(this.state.msg)}}>get</button><button onClick={()=>{this.setState({msg:''})}}>reset</button></div>)}
}
<Child mymsg={this.state.msg} /> //将值传给子组件

受控组件filter

export default class App extends Component{state={mytext:'',list:[{id:1,name:'我'},{id:2,name:'你'},{id:3,name:'他'}]}render(){return(<div><input value={this.state.mytext} onChange={(event)=>{this.setState({mytext:event.target.value //将值赋给状态 从而引发render改变input显示内容})}}/>{this.getList().map(i=>{<ul key={i.id}><li>{i.name}</li></ul>})}</div>)}getList(){return this.state.list.filter(i=>{i.name.toUpperCase().includes(this.state.mytext.toUpperCase())})}
}

React受控组件非受控组件相关推荐

react梳理之(非)受控组件
react开始梳理,不会从最基本的创建一个react项目开始,只是梳理一些概念,今天简单梳理一个较为简单的概念,就是受控组件与非受控组件一.react的非受控组件 1.什么叫非受控组件我们从两个字 ...
重新认识受控和非受控组件
该文章包含如下内容受控与非受控组件非受控组件受控组件受控和非受控组件边界反模式解决方案前言在 HTML 中,表单元素(<input>/<textarea>/< ...
查找DOM,受控与非受控组件
1.查找dom节点常用的方法有两种: 第一种常用的方法 1.在constructor中创建ref对象:this.变量 = React.createRef() 2.在标签中使用ref属性绑定创建的re ...
[react] 如何给非控组件设置默认的值？
[react] 如何给非控组件设置默认的值? 表单元素依赖于状态(state),表单元素需要默认值实时映射到状态的时候,就是受控组件 <input name="username&quo ...
我们应该如何优雅的处理 React 中受控与非受控
受控 & 非受控今天来和大家简单聊聊 React 中的受控和非受控的概念. 提到受控和非受控相信对于使用过 React 的朋友已经老生常谈了,在开始正题之前惯例先和大家聊一些关于受控 &am ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
React表单 (受控组件,非受控组件)
react中的表单不同于基本的dom操作他主要可分为受控组件和非受控组件这里我们先创建一个react项目这里我们就直接将代码写在App.jsx里了 App.jsx参考代码如下 import ' ...
10 非受控组件以及受控与非受控的选择方案
含义非受控组件:表单数据不受控与state的(未绑定value),使用React ref从DOM节点中获取表单数据的组件提示refs弃用 class MyForm extends React.Co ...
react中使用非受控组件获取表单元素的值
class Hello extends React.Component{constructor(){super() 利用react提供的React.createRef()this.ref=React. ...

React受控组件非受控组件

React受控组件非受控组件相关推荐

最新文章

热门文章