zoukankan      html  css  js  c++  java
  • [React] Make Controlled React Components with Control Props

    Sometimes users of your component want to have more control over what the internal state is. In this lesson we'll learn how to allow users to control some of our component’s state just like the <input />'s value prop.

    Controlled props is the prop that component let user fully control.

    import React from 'react';
    
    class Toggle extends React.Component {
    
        // An empty function
        static defaultProps = {
            defaultOn: false,
            onToggle: () => {
            }
        };
    
        // default state value
        initialState = {on: this.props.defaultOn};
        state = this.initialState;
    
        isControlled() {
            return this.props.on !== undefined;
        }
    
        // toggle method
        toggle = () =>{
          if (this.isControlled()) {
            this.props.onToggle(!this.props.on)
          } else {
              this.setState(
                  ({on}) => ({on: !on}),
                  () => {
                      this.props.onToggle(this.state.on)
                  }
              );
          }
        };
    
    
        reset = () => this.setState(
            this.initialState
        );
    
        render() {
            return this.props.render({
                on: this.isControlled() ?
                        this.props.on :
                        this.state.on,
                toggle: this.toggle,
                reset: this.reset,
                getProps: (props) => {
                    return {
                        'aria-expanded': this.state.on,
                        role: 'button',
                        ...props
                    };
                }
            });
        }
    }
    
    export default Toggle;
  • 相关阅读:
    img src 改变问题
    <a href="javascript:;" ></a>
    CSS先后顺序影响效果
    CSS学习遇到问题,注释问题
    关于某个网站的分析
    问题汇总
    作为一枚web前端开发工程师 这些CSS 小技巧你值得掌握
    web前端性能优化
    Sea.js学习笔记
    学习计划
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8041059.html
Copyright © 2011-2022 走看看