如何在eventHandler上更改React中的特定組件

Question

我正在嘗試做的事情應該很簡單，但是似乎我無法使用此功能來引用特定的組件

所以這里有我的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>
        );
      }
    }  

請注意
如您所見，我將處理程序綁定在構造函數中，而不是在render方法中。 這樣，您只需將其綁定一次，而不是在每個渲染調用上綁定它，它將在每個渲染上創建一個新實例。 那對性能更好。

Answer 2

React組件中的this並不是指DOM元素，而是指Component實例，因為給定組件的DOM可以由於狀態或道具的改變而以任意方式改變。

正如@Chris在上面的評論中提到的那樣，除非您有充分的理由並且知道自己在做什么，否則您不應該將jQuery與React組件一起使用。

相反，您應該使用Component狀態聲明您想要的內容，然后在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>