javascript - 如何在事件处理程序上更改 React 中的特定组件

Question

我想做的应该相当简单，但似乎我无法使用 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;

然后是 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;

看起来像这样:

现在我想要实现的是，当您单击 3 个框中的任何一个时，背景颜色将仅在被单击的特定框上发生变化。

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

Answer 1

为此您不需要 jQuery。 有几种方法可以在 DOM 中引用组件，并且有几种此类组件的模式(受控和非受控)，您应该了解一下。
至于您的解决方案，这是一个简单的解决方案，仅供您入门。
在事件处理程序上，您可以将 event 作为参数访问。 changeColor(e) 因为e 是保存事件信息的对象以及target(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>
        );
      }
    }  

请注意
如您所见，我在构造函数中绑定(bind)了处理程序，而不是在 render 方法中。这样你只绑定(bind)一次而不是在每次渲染调用时女巫都会在每个渲染上创建一个新实例。这对性能更好。