博客

受控组件：广义上的说法是 react组件的数据渲染是被

调用者

传递的props完全控制

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

//非受控组件 不利于组件通信 局限性
export default class App extends Component {
    myref = React.createRef
    render(){
        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())
        })
    }
}