关于react.js:6-状态提升-受控组件和非受控组件

36次阅读

共计 912 个字符，预计需要花费 3 分钟才能阅读完成。

状态晋升其实很简略，就是同一个数据，有很多组件要应用，所以就把这个数据放到这些组件独特的父组件中进行治理，而后再将父组件中治理的数据通过 props 传递给子组件

import React,{Component} from 'react'

class Child1 extends Component {render(){
        return (<div>{this.props.name}</div>
        )
    }
}

class Child2 extends Component {render(){
        return (<div>{this.props.name}</div>
        )
    }
}

export default class up extends Component{
    state={name:"React"}

    render(){
        return (
            <>
                <Child1 name={this.state.name}></Child1>
                <Child2 name={this.state.name}></Child2>
            </>
        )
    }
}

受控组件，顾名思义就是被管制，受管制的组件，如果一个组件的状态是被 state 齐全管制，并且只能应用 setState 办法进行更新的话，这个组件就是一个受控组件。

在 HTML 中，像是 input、textarea、select 这类表单元素，他们自身会保护本身的状态，并且依据用户的输出进行更新，然而将他们变成受控组件后，如果不应用 setState 办法，用户是无奈输出的。

受控组件的实现原理很简略：通过 state 初始化表单的默认值，每当表单的值发生变化，调用 onChange 事件处理，事件处理器通过合成事件对象 e 拿到扭转后的状态，并更新利用的 state，setState 触发视图的从新渲染，实现表单组件的值的更新。

// 将用户输出转变为大写
<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({value: e.target.value.toUpperCase(),
        });
    }}
/>

非受控组件也就是不瘦 react 管制的组件，比方不做受控解决的 input 标签等。

正文完