使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器

最新推荐文章于 2023-02-06 23:20:03 发布

原创最新推荐文章于 2023-02-06 23:20:03 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

这篇博客介绍了React中一个名为Toggle的组件，该组件用于切换按钮的状态。通过`this.setState`来管理组件的内部状态，并在点击按钮时更新状态。`handleClick`函数实现了状态的反转逻辑，确保按钮显示'ON'或'OFF'。这个例子展示了React组件的基本状态管理和事件处理机制。


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
 
    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    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('example')
);