我正在尝试在 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/
最佳答案
this
不会是 HTML 元素,而是 React Object 实例。
我会尝试更被动的方式来实现这一点并使用 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>
);
}
}
关于javascript - 如何在 react 组件中切换 mousedown/mouseup 类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50175081/