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可能会因更改状态或props而以任意方式更改。 / p>

正如@Chris在上面的评论中所提到的，你不应该在你的React组件中使用jQuery，除非你有充分的理由，而且你知道你在做什么

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

这是一个例子

＆＃13;

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'));

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在eventHandler

2 个答案: