You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An Uncontrolled Component is one that stores and maintains its own state internally.
A ref is used to find its current value when you need it.
React doesn't recommend this pattern but it's useful when developers only care about the final state rather than the intermediate state of the component. The following is an example of a Switch implemented in uncontrolled way.
classSwitchextendsReact.Component{constructor(props){super(props);// maintain its own statethis.state={checked: false};}// expose state data for parent component to accessgetvalue(){returnthis.state.checked;}toggle=()=>{this.setState((prevState)=>{return{checked: !prevState.checked}})}render(){// check status is maintained in own stateconst{ checked }=this.state;letclassNames=['switch'];if(checked){classNames=[...classNames,'checked']}return(<div><buttonclassName={classNames.join(' ')}onClick={this.toggle}/></div>);}}classWrapperextendsReact.Component{ref=React.createRef();getValue=()=>{alert(this.ref.current.value);}render(){return<React.Fragment><Switchref={this.ref}/><buttononClick={this.getValue}style={{marginTop: 20}}> Switch Status </button></React.Fragment>}}ReactDOM.render(<Wrapper/>,document.getElementById('root'));
The Controlled
A Controlled Component takes its current value through props and notifies changes through callbacks. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component.
The following is an example of a Switch implemented in controlled way.
classSwitchextendsReact.Component{constructor(props){super(props);}toggle=()=>{// callback passed in from parentconst{ checked, onChange }=this.props;onChange(!checked)}render(){// check status is maintained by props from parent componentconst{ checked }=this.props;letclassNames=['switch'];if(checked){classNames=[...classNames,'checked']}return(<div><buttonclassName={classNames.join(' ')}onClick={this.toggle}/></div>);}}classWrapperextendsReact.Component{state={checked: false}getValue=()=>{alert(this.state.checked);}// when check status changes, maintain it in parent stateonChange=(checked)=>{this.setState({
checked
})}render(){return<React.Fragment><Switchchecked={this.state.checked}onChange={this.onChange}/><buttononClick={this.getValue}style={{marginTop: 20}}> Switch Status </button></React.Fragment>}}ReactDOM.render(<Wrapper/>,document.getElementById('root'));
The Mixed
A Mixed Component allows for usage in either Uncontrolled or Controlled way. It accepts its initial value as a prop and puts it in state. It then reacts to props change through Component Lifecycle to sync state update to date with props.
classSwitchextendsReact.Component{constructor(props){super(props);// maintain check status in own statethis.state={checked: props.checked||false};}getvalue(){returnthis.state.checked;}staticgetDerivedStateFromProps(nextProps,currentState){// react to props change and sync state accordingly// only in controlled modeif(nextProps.hasOwnProperty('checked')&&(nextProps.checked!=currentState.checked)){return{checked: nextProps.checked}}returnnull;}toggle=()=>{const{ onChange, checked }=this.props;const{checked: checkedInState}=this.stateif(!this.props.hasOwnProperty('checked')){// no checked prop, uncontrolledthis.setState({checked: !checkedInState})}onChange&&onChange(!checkedInState)}render(){const{ checked }=this.state;letclassNames=['switch'];if(checked){classNames=[...classNames,'checked']}return(<div><buttonclassName={classNames.join(' ')}onClick={this.toggle}/></div>);}}classWrapperextendsReact.Component{ref=React.createRef();state={controlledChecked: false,}controlledOnChange=(checked)=>{this.setState({controlledChecked: checked;})}getUncontrolledValue=()=>{alert(this.ref.current.value);}getControlledValue=()=>{alert(this.state.controlledCheck);}render(){return<React.Fragment><div>
Uncontrolled: <Switchref={this.ref}/><buttononClick={this.getUncontrolledValue}style={{marginTop: 20}}>
Uncontrolled Switch Status
</button></div><hr/><div>
Controlled: <Switchchecked={this.state.controlledChecked}onChange={this.controlledOnChange}/><buttononClick={this.getControlledValue}style={{marginTop: 20}}>
Controlled Switch Status
</button></div><hr/></React.Fragment>}}ReactDOM.render(<Wrapper/>,document.getElementById('root'));
Notice
If you want to follow the latest news/articles for the series of my blogs, Please 「Watch」to Subscribe.
The text was updated successfully, but these errors were encountered:
The Uncontrolled
ref
is used to find its current value when you need it.Switch
implemented in uncontrolled way.The Controlled
The following is an example of a
Switch
implemented in controlled way.The Mixed
A
Mixed
Component allows for usage in eitherUncontrolled
orControlled
way. It accepts its initial value as a prop and puts it in state. It then reacts to props change through Component Lifecycle to sync state update to date with props.Switch Example in Mixed mode
Notice
The text was updated successfully, but these errors were encountered: