如何在 React 组件中切换 mousedown/mouseup 类？

Question

我正在尝试在反应组件中切换一个类，如果用户将鼠标放在按钮上，那么它会向该按钮添加一个类，当用户按下鼠标时，它会恢复并删除该类从按钮。

按照 此处 官方 ReactJS 文档中的解释和示例，我设法将以下代码片段放在一起，但它不起作用，并且不断在控制台上抛出语法错误：

 import React from 'react';

export class Buttons extends React.Component{

    toggleClass() {
        if this.classList.has('btnDown') {
            this.classList.remove('btnDown');
        } else {
            this.classList.add('btnDown');
        }
    }

    render(){
        return (
            <div className="btn-wrap">
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '1' >1</button>
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '2' >2</button>
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '3' >3</button>
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '4' >4</button>
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '5' >5</button>
                <button onMouseDown={(e) => this.toggleClass(e)} onMouseUp={(e) => this.toggleClass(e)} value = '6' >6</button>
            </div>
        )
    }
}

更新：

我重写了组件以使用 react 的 state 使用下面的@TomaszMularczyk 的回答作为参考，但现在所有按钮都被切换，而不是仅单击按钮，如下所示： https ://jsfiddle.net/69z2wepo /183164/

原文由 AndrewL64 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

this 不会是 HTML 元素，而是 React 对象实例。

我会尝试更被动的方式来实现这一目标并使用 state ：

 class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDown: false
    };
  }

  toggleClass() {
    this.setState(prevState => ({ isDown: !prevState.isDown }));
  }

  render() {
    return (
      <button
        className={this.state.isDown ? "btnDown" : ""}
        onMouseDown={e => this.toggleClass(e)}
        onMouseUp={e => this.toggleClass(e)}
        {...this.props}
      />
    );
  }
}

export class Buttons extends React.Component {
  render() {
    return (
      <div className="btn-wrap">
        <Button value="1">1</Button>
        <Button value="2">2</Button>
        ....
      </div>
    );
  }
}

原文由 Tomasz Mularczyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以制作自己的 Button 组件

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDown: false
    };
  }

  toggleClass() {
    this.setState(prevState => ({ isDown: !prevState.isDown }));
  }

  render() {
    const className = `${this.state.isDown ? "btnDown" : ""}`;
    return <button className={className} onMouseDown={e => this.toggleClass(e)} value={this.props.value} {...this.props}>{this.props.children}</button>
  }
}

然后使用那些而不是 html 按钮 -

 <div className="btn-wrap">
    <Button value = '1'>1</Button>
    <Button value = '2'>2</Button>
    <Button value = '3'>3</Button>
    <Button value = '+' onClick={e => console.log('+ clicked')}>3</Button>
    <Button value = '-' onClick={e => console.log('- clicked')}>3</Button>
</div>

原文由 Mukesh Soni 发布，翻译遵循 CC BY-SA 4.0 许可协议