[React] Make Controlled React Components with Control Props

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_33840661

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量140

点赞数

文章标签： javascript ViewUI

本文介绍如何在React中创建可控组件，使用户能够完全控制组件的状态，类似于<input>元素的value属性工作方式。通过一个具体的Toggle组件示例，演示了如何实现可控与非可控两种模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;