如何在事件处理程序上更改 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

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

正如@Chris 在上面的 cmets 中所提到的，你不应该将 jQuery 与你的 React 组件一起使用，除非你有充分的理由，并且你知道自己在做什么。

相反，您应该使用组件状态来声明您想要什么，然后在您的render() 方法中反映您的组件状态。

这是一个例子

class CoolBox extends React.Component {
  
  constructor(...args) {
    super(...args);
    this.state = {
      color: 'red'
    };
    
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    this.setState({
      color: this.state.color === 'red' ? 'green' : 'red'
    });
  }
  
  render() {
    return <div 
      onClick={this.changeColor} 
      className="box"
      style={{backgroundColor: this.state.color}}
      ></div>
  }
}


class App extends React.Component {
  render() {
    return (
      <div>
        <CoolBox />
        <CoolBox />
        <CoolBox />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Answer 2

你不需要 jQuery。 有几种方法可以引用 DOM 中的组件，并且您应该阅读这些组件的几种模式（受控和不受控）。
至于你的解决方案，这是一个简单的解决方案，只是为了让你开始。
在事件处理程序上，您可以访问 event 作为参数。 changeColor(e) as 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>
        );
      }
    }  

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