React中能否不使用State实现点击textarea改变Div背景色？

当然可以不用State实现！咱们先拆解你代码里的几个问题，再给出可行的方案：

你的原代码存在的关键问题 #

• 构造函数里的color是局部变量，不是组件实例的属性，所以render里的this.color根本访问不到
• 就算把color改成实例属性，直接修改this.color也不会触发React的重渲染，DOM不会更新
• changeColor方法没有绑定this，点击textarea时this会变成undefined，无法执行后续操作

不用State的解决方案：直接操作DOM（推荐） #

绕开React的状态更新机制，用Ref直接操作目标DOM元素的样式是最直接的方法，完全不需要State。下面是修改后的代码：

import React, { Component, createRef } from 'react';

class Comment extends Component {
  // 创建ref指向div容器
  commentContainer = createRef();

  constructor(props) {
    super(props);
  }

  // 用箭头函数自动绑定组件实例的this，避免指向错误
  changeColor = () => {
    // 通过ref获取DOM元素，直接修改背景色
    if (this.commentContainer.current) {
      this.commentContainer.current.style.backgroundColor = "blue";
    }
  }

  render() {
    return(
      <div 
        className="CommentPlaceHolder" 
        style={{backgroundColor: "red"}} {/* 设置初始背景色 */}
        ref={this.commentContainer} {/* 将ref绑定到div上 */}
      >
        <form id="form1">
          <textarea 
            onFocus={this.changeColor} 
            className="comment" 
            id="feed" 
            name="subject" 
            placeholder="Write something.."
          ></textarea>
          <button type="submit" form="form1">Paskelbti</button>
        </form>
      </div>
    );
  }
}

export default Comment;

改动说明

1. 用createRef创建commentContainer，绑定到目标div，这样就能直接访问这个DOM元素
2. 用箭头函数定义changeColor，自动绑定组件实例的this，解决点击时this指向错误的问题
3. 在changeColor里直接修改DOM元素的style.backgroundColor，实时生效

备选方案：实例属性+强制更新（不推荐） #

如果你想保留“通过变量控制颜色”的逻辑，也可以用组件实例属性结合forceUpdate强制重渲染，但这种方法绕过了React的State设计理念，仅作参考：

import React, { Component } from 'react';

class Comment extends Component {
  // 定义实例属性作为颜色变量
  color = "red";

  constructor(props) {
    super(props);
    // 绑定this到changeColor方法
    this.changeColor = this.changeColor.bind(this);
  }

  changeColor() {
    this.color = "blue";
    this.forceUpdate(); // 强制组件重渲染，更新DOM
    console.log(this.color);
  }

  render() {
    return(
      <div className="CommentPlaceHolder" style={{backgroundColor: this.color}}>
        <form id="form1">
          <textarea onFocus={this.changeColor} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
          <button type="submit" form="form1">Paskelbti</button>
        </form>
      </div>
    );
  }
}

export default Comment;

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