React受控组件非受控组件

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

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

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

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

受控组件filter

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！