जब आप इनलाइन स्टाइल करते हैं, तो आप ReactJS में एक हॉवर ईवेंट या सक्रिय ईवेंट कैसे प्राप्त कर सकते हैं?
मैंने पाया है कि onMouseEnter, onMouseLeave दृष्टिकोण छोटी गाड़ी है, इसलिए उम्मीद है कि इसे करने का एक और तरीका है।
विशेष रूप से, यदि आप एक घटक पर बहुत जल्दी से माउस ले जाते हैं, तो केवल ऑनमैटर ईवेंट पंजीकृत है। OnMouseLeave कभी भी आग नहीं लगाता है, और इस तरह राज्य को अपडेट नहीं कर सकता है ... घटक को प्रकट करने के लिए छोड़ देता है जैसे कि यह अभी भी मँडरा रहा है। मैंने एक ही चीज़ देखी है यदि आप कोशिश करते हैं और ": सक्रिय" सीएसएस छद्म वर्ग की नकल करते हैं। यदि आप वास्तव में तेजी से क्लिक करते हैं, तो केवल ऑनमेडडाउन इवेंट रजिस्टर होगा। OnMouseUp ईवेंट को नजरअंदाज किया जाएगा ... घटक को छोड़कर सक्रिय दिखाई दे रहा है।
यहाँ एक JSFiddle समस्या दिखा रहा है: https://jsfiddle.net/y9swecyu/5/
समस्या से JSFiddle का वीडियो: https://vid.me/ZJEO
कोड:
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function() {
this.setState({
hover: true
});
console.log('enter');
},
onMouseLeaveHandler: function() {
this.setState({
hover: false
});
console.log('leave');
},
render: function() {
var inner = normal;
if(this.state.hover) {
inner = hover;
}
return (
<div style={outer}>
<div style={inner}
onMouseEnter={this.onMouseEnterHandler}
onMouseLeave={this.onMouseLeaveHandler} >
{this.props.children}
</div>
</div>
);
}
});
var outer = {
height: '120px',
width: '200px',
margin: '100px',
backgroundColor: 'green',
cursor: 'pointer',
position: 'relative'
}
var normal = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 0
}
var hover = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 1
}
React.render(
<Hover></Hover>,
document.getElementById('container')
)