我有以下非常简单的React类:

import React from "react"

let color = 'red';

export default class DoubleClick extends React.Component {
  handleClick() {
    console.log("Hi");
    color = 'blue';
  }
  handleDoubleClick() {
    console.log("Double Click");
  }
  render() {
    return (
      <div style={{backgroundColor: 'pink'}}>
          <div onClick={this.handleClick} style={{backgroundColor: color}}>
            <span onDoubleClick={this.handleDoubleClick}> Hello </span>
            <span onDoubleClick={this.handleDoubleClick}> world. </span>
          </div>
      </div>
    );
  }
}


单击div时,我想更改div的背景颜色。用React做到这一点的最佳方法是什么?我在类之外定义了一个颜色变量,但是我知道这可能不是正确的方法。另外,尽管console.log可以工作并且调用了该函数,但它不能工作或无法重新渲染。

最佳答案

因为您没有将this绑定到函数,所以它不起作用,因此,执行此操作的函数方法是使用可变状态:

import React from 'react';

export default class DoubleClick extends React.Component {
  constructor() {
    super();
    this.state = {
      style: {
        color: 'red'
      }
    };
  }
  handleClick() {
    console.log('Hi');
    this.setState({ style: { color: 'blue' } });
  }

  handleDoubleClick() {
    console.log('Double Click');
  }

  render() {
    return (
      <div>
        <div onClick={this.handleClick.bind(this)} style={this.state.style}>
          <span onDoubleClick={this.handleDoubleClick.bind(this)}> Hello </span>
          <span onDoubleClick={this.handleDoubleClick.bind(this)}> world. </span>
        </div>
      </div>
    );
  }
}

编辑:
修复状态管理。

10-05 20:46
查看更多