代码之家 › 专栏 › 技术社区 › AndrewL64

如何在react组件中切换mousedown/mouseup上的类?

reactjs javascript

AndrewL64 · 技术社区 · 8 年前

我试图在react组件中切换一个类,如果用户将鼠标放在某个按钮上,它将向该按钮添加一个类,当用户使用鼠标时,它将返回并从按钮中删除该类。

遵循官方ReactJS文件中的解释和示例 here ,我成功地整理了以下代码段,但它不起作用,并不断在控制台上抛出语法错误:

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/

4 回复 | 直到 7 年前

Tomasz Mularczyk 8 年前

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

Mukesh Soni 8 年前

您可以制作自己的按钮组件

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>

Hamza El Aoutar 8 年前

而不是使用 this 在…内 toggleClass ,使用事件对象:

class Buttons extends React.Component {
    toggleClass(e) {
      if(e.target.classList.contains('btnDown')) {
        e.target.classList.remove('btnDown');
      } else {
        e.target.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>
        </div>
      )
    }
}

css摘自@Tomasz Mularczyk的答案。

jsfiddle

Slobodan KrasavÄeviÄ 8 年前

我稍微重写了您的代码,现在应该可以正常工作了:

class Buttons extends React.Component {

     constructor(props) {
         super(props);
         this.state = {
         isDown: null
      };

  }

  pressButton = (i) => {
    this.setState({ isDown: i });
  };
  releaseButton = () => {
    this.setState({ isDown: null });
  };

  render() {
    const { isDown } = this.state;
    const buttons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '+', '-'];

    return (
      <div className="btn-wrap">
        {buttons.map((button, i) => (
          <button
            className={`${isDown === i ? 'btnDown' : ''}`}
            onMouseDown={this.pressButton.bind(undefined, i)}
            onMouseUp={this.releaseButton}
            value={button}
          >
            {button}
          </button>
        ))}
      </div>
    )
  }
}

ReactDOM.render(
  <Buttons />,
  document.getElementById('container')
);`