我在React中使用了onMouseOver事件,但是它对我来说并不起作用。我已经按照正确的方式使用、调用和设置了状态。以下是我的代码,请有人帮忙。
import React from 'react';
const style = {
color:"black",
fontSize:16,
borderRadius:4,
border: "1px solid grey",
lineHeight: "28px",
background: "white",
padding: 3,
margin:3,
}
const highlightStyle = {
color:"black",
fontSize:16,
border: "1px solid grey",
background:"lightblue",
borderRadius:4,
lineHeight: "25px",
padding: 3,
margin:5
}
export default class SplitSpansPreview extends React.Component {
constructor(props){
super(props)
this.state = {
color_black: true,
hover: false
}
this.changeColor = this.changeColor.bind(this)
this.onHover = this.onHover.bind(this)
this.hoverOn = this.hoverOn.bind(this)
this.hoverOff = this.hoverOff.bind(this)
}
onHover() { alert("hello")
this.setState({ hover: true });
}
hoverOn(){alert("hcek")
// this.setState({ hover: true });
}
hoverOff(){ alert("kol")
// this.setState({ hover: false });
}
changeColor() {
const id = this.props.atId;
const self = this
this.setState({color_black: !this.state.color_black}, () => {
if(this.state.color_black){
self.props.getDisselectedId(id);
} else {
self.props.getSelectedId(id);
}
});
}
createMarkup(data) {
return {__html: data}
}
render(){
let checkBreak = this.props.item.substring(0,4)
if(checkBreak == '<br>' || checkBreak == ' <br') {
const itemLength = this.props.item.length
if(checkBreak == '<br>') {
var item = this.props.item.substring(4,itemLength)
} else {
var item = this.props.item.substring(5,itemLength)
}
if(this.props.punctuation) {
return(
<span>
<br/>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
onMouseOver={this.onHover}
>
{item}
</span>
<span className = {this.props.classword}>
{this.props.punctuation}
</span>
</span>
)
} else {
return(
<span>
<br/>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={() => this.changeColor()}
onMouseEnter={() => this.hoverOn()}
onMouseLeave={() => this.hoverOff()}
>
{item}
</span>
</span>
)
}
} else {
if(this.props.punctuation) {
return(
<span>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
>
{this.props.item}
</span>
<span className = {this.props.classword}>
{this.props.punctuation}
</span>
</span>
)
} else {
return(
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
>
{this.props.item}
</span>
)
}
}
}
}
最终我编辑了我的代码,以下是整个代码,请找出错误并让我知道。如果您更改了我的代码并且它可以工作,我会很高兴。 我阅读了很多文章,但无法使其工作,所以请看看发生了什么。
hoverOn
和hoverOff
吗? - Hemerson Carlin