在这里,我正在使用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>
)
}
}
}
}
最后我编辑我的代码,这里是我的整个代码,请找错误并让我知道。如果你改变我的代码,我会很高兴,如果它的工作。 我读了很多文章,但不能工作,所以请看看会发生什么。
答案 0 :(得分:1)
您必须以不同的方式传递函数,以便this
变量正确指向组件,this.setState
可以正常工作。
下面给出了一种方式
<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>
我使用以下工作示例检查了代码
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
message: ""
};
}
onMouseEnter() {
this.setState({message: 'Mouse Enter'})
}
onMouseLeave() {
this.setState({message: 'Mouse Leave'})
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p onMouseEnter={() => this.onMouseEnter()} onMouseLeave={() => this.onMouseLeave()}>
Hover here!
</p>
<span>{this.state.message}</span>
</div>
);
}
}
render(<App />, document.getElementById('root'));