我有以下非常简单的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>
);
}
}
编辑:
修复状态管理。