Javascript 如何更改eventHandler上的React中的特定组件

我试图做的应该相当简单，但似乎我无法使用this

所以这里有我的App.js

import React, { Component } from 'react';
import CoolBox from './coolBox.js';
import './App.css';

    class App extends Component {

      changeColor(){
        $(this).css('background','blue');
      }

      render() {
        return (
          <div className="App">
            <CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
            <CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
            <CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
          </div>
        );
      }
    }

    export default App;

import React，{Component}来自'React'；
从“./CoolBox.js”导入CoolBox；
导入“/App.css”；
类应用程序扩展组件{
changeColor（）{
$（this.css（'background'，'blue'）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

然后是CoolBox.js，它只是一个背景为红色的简单方框：

import React, { Component } from 'react';
import $ from 'jquery';

class CoolBox extends Component {

  render() {
    return (
      <div onClick={this.props.changeColor} className="box"></div>
    );
  }
}

export default CoolBox;

import React，{Component}来自'React'；
从“jquery”导入美元；
类CoolBox扩展组件{
render（）{
返回(
);
}
}
导出默认的冷却箱；

看起来就像这样：

现在，我试图实现的是，当你点击3个框中的任何一个时，背景颜色将仅在点击的特定框上改变

---

如果$（this）不能被引用，我似乎无法使用任何jquery方法。那么如何在React中实现这个简单的功能呢？

React组件中的这个

并不是指DOM元素，而是指组件实例，因为给定组件的DOM可以由于状态或道具的改变而以任意方式改变

正如@Chris在上面的评论中提到的，您不应该对React组件使用

jQuery

，除非您有很好的理由，并且您知道自己在做什么

相反，您应该使用组件状态声明所需内容，然后在

render（）

方法中反映组件的状态

这里有一个例子

类CoolBox扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
颜色：“红色”
};
this.changeColor=this.changeColor.bind（this）；
}
changeColor（）{
这是我的国家({
颜色：this.state.color=='red'？'green'：'red'
});
}
render（）{
返回
}
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'app'））
.box{
高度：100px；
宽度：100px；
利润率：10px；
显示：内联块；
}
在React组件中，此
不是指DOM元素，而是指组件实例，因为给定组件的DOM可以因状态或道具的更改而以任意方式更改

正如@Chris在上面的评论中提到的，您不应该对React组件使用
jQuery
，除非您有很好的理由，并且您知道自己在做什么

相反，您应该使用组件状态声明所需内容，然后在
render（）
方法中反映组件的状态

这里有一个例子


类CoolBox扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
颜色：“红色”
};
this.changeColor=this.changeColor.bind（this）；
}
changeColor（）{
这是我的国家({
颜色：this.state.color=='red'？'green'：'red'
});
}
render（）{
返回
}
}
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'app'））
.box{
高度：100px；
宽度：100px；
利润率：10px；
显示：内联块；
}
这不需要jQuery。
有两种方法可以引用DOM中的组件，这类组件有两种模式（受控和非受控），您应该了解它们。

对于您的解决方案，这是一个简单的解决方案，只是让您开始使用。

在事件处理程序上，您可以将
事件
作为参数访问。
changeColor（e）
因为
e
是保存事件信息以及
目标的对象（您在案例中单击的
div
。

所以基本上你可以在App.js中做的是：

class App extends React.Component {
            constructor(props){
        super(props);
        this.changeColor = this.changeColor.bind(this);
      }
      changeColor(e){
        e.target.style.background = "blue";
      }

      render() {
        return (
          <div className="App">
            <CoolBox changeColor={this.changeColor} />
            <CoolBox changeColor={this.changeColor} />
            <CoolBox changeColor={this.changeColor} />
          </div>
        );
      }
    }  

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.changeColor=this.changeColor.bind（this）；
}
变色（e）{
e、 target.style.background=“蓝色”；
}
render（）{
返回(
);
}
}  

请注意

如您所见，我在构造函数中绑定处理程序，而不是在
render
方法中绑定。这样，您只需绑定一次，而不是在每次渲染调用时绑定，witch将在每次渲染时创建一个新实例。这对性能更好。
您不需要jQuery来实现这一点。
有两种方法可以引用DOM中的组件，这类组件有两种模式（受控和非受控），您应该了解它们。

对于您的解决方案，这是一个简单的解决方案，只是让您开始使用。

在事件处理程序上，您可以将
事件
作为参数访问。
changeColor（e）
因为
e
是保存事件信息以及
目标的对象（您在案例中单击的
div
。

所以基本上你可以在App.js中做的是：

class App extends React.Component {
            constructor(props){
        super(props);
        this.changeColor = this.changeColor.bind(this);
      }
      changeColor(e){
        e.target.style.background = "blue";
      }

      render() {
        return (
          <div className="App">
            <CoolBox changeColor={this.changeColor} />
            <CoolBox changeColor={this.changeColor} />
            <CoolBox changeColor={this.changeColor} />
          </div>
        );
      }
    }  

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.changeColor=this.changeColor.bind（this）；
}
变色（e）{
e、 target.style.background=“蓝色”；
}
render（）{
返回(
);
}
}  

请注意