React中点击按钮修改指定元素背景色的实现方法

嘿，我来帮你搞定这个需求～在React里实现点击按钮修改元素背景色，有两种常用的方式，我都给你详细拆解一下：

React的核心思想是状态驱动UI，所以优先推荐用状态来控制样式变化，这种方式不需要直接操作DOM，更符合React的设计理念，也更容易维护。

具体实现思路：

• 用组件的state存储div和按钮的背景色状态
• 给按钮绑定点击事件，点击时更新state
• 在渲染时，把状态绑定到对应元素的style属性上

完整代码示例：

import React, { Component } from 'react';

class App extends Component {
  // 初始化状态，默认无背景色
  state = {
    divBgColor: '',
    buttonBgColor: ''
  };

  // 点击事件处理函数
  handleButtonClick = () => {
    // 更新状态，触发组件重新渲染
    this.setState({
      divBgColor: 'red',
      buttonBgColor: 'blue'
    });
  };

  render() {
    // 解构状态，简化代码
    const { divBgColor, buttonBgColor } = this.state;
    return (
      <React.Fragment>
        {/* 将背景色状态绑定到div的style */}
        <div style={{ backgroundColor: divBgColor }}>This is a button</div>
        {/* 绑定点击事件和按钮的背景色状态 */}
        <button 
          style={{ backgroundColor: buttonBgColor }}
          onClick={this.handleButtonClick}
        >
          Click me!
        </button>
      </React.Fragment>
    );
  }
}

export default App;

如果你确实想通过ref来实现，也是可以的，不过要注意：React中尽量避免直接操作DOM，除非遇到必须的场景（比如操作第三方DOM库）。

具体实现思路：

• 用React.createRef()创建两个ref，分别指向div和按钮
• 给按钮绑定点击事件，点击时通过ref.current获取DOM元素，直接修改其样式

完整代码示例：

import React, { Component } from 'react';

class App extends Component {
  // 创建ref实例
  divRef = React.createRef();
  buttonRef = React.createRef();

  handleButtonClick = () => {
    // 先判断ref的current是否存在，避免空值报错
    if (this.divRef.current) {
      this.divRef.current.style.backgroundColor = 'red';
    }
    if (this.buttonRef.current) {
      this.buttonRef.current.style.backgroundColor = 'blue';
    }
  };

  render() {
    return (
      <React.Fragment>
        {/* 给div绑定ref */}
        <div ref={this.divRef}>This is a button</div>
        {/* 给按钮绑定ref和点击事件 */}
        <button 
          ref={this.buttonRef}
          onClick={this.handleButtonClick}
        >
          Click me!
        </button>
      </React.Fragment>
    );
  }
}

export default App;

如果之后你的样式变得更复杂，推荐用CSS类名切换的方式，把样式和逻辑分离，代码会更清晰：

首先定义CSS类：

.red-bg {
  background-color: red;
}
.blue-bg {
  background-color: blue;
}

然后修改React代码：

import React, { Component } from 'react';
import './App.css'; // 引入样式文件

class App extends Component {
  state = {
    divClass: '',
    buttonClass: ''
  };

  handleButtonClick = () => {
    this.setState({
      divClass: 'red-bg',
      buttonClass: 'blue-bg'
    });
  };

  render() {
    const { divClass, buttonClass } = this.state;
    return (
      <React.Fragment>
        <div className={divClass}>This is a button</div>
        <button 
          className={buttonClass}
          onClick={this.handleButtonClick}
        >
          Click me!
        </button>
      </React.Fragment>
    );
  }
}

export default App;

内容的提问来源于stack exchange，提问作者ajnabz