React Doc 简单摘要（三）

最新推荐文章于 2023-01-30 17:08:46 发布

原创最新推荐文章于 2023-01-30 17:08:46 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍React中如何使用驼峰命名法处理DOM事件，并通过实例演示了如何利用类组件的状态管理和事件处理来实现按钮的开关效果。

事件处理

注意命名规范：

驼峰命名：原来的 onclick 变成 onClick
处理函数： handle*

注意 this 指针的绑定。

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};

        // This binding is necessary to make 'this' work in the callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}

ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);