আপনি যখন ইনলাইন স্টাইলিং করেন তখন আপনি কীভাবে কোনও হওয়ার ইভেন্ট বা সক্রিয় ইভেন্টটি রিঅ্যাক্টজেএসে অর্জন করতে পারেন?
আমি খুঁজে পেয়েছি যে onMouseEnter, onMouseLaveve পদ্ধতির বিষয়টি বগি, সুতরাং আশা করি এটি করার অন্য কোনও উপায় আছে।
বিশেষত, আপনি যদি খুব দ্রুত কোনও উপাদানকে মাউস করেন তবে কেবলমাত্র onMouseEnter ইভেন্টটি নিবন্ধিত হবে। অনমাউসলিয়েভ কখনই আগুন দেয় না, এবং এভাবে স্থিতি আপডেট করতে পারে না ... উপাদানটিকে এমনভাবে উপস্থিত হতে দেখা যায় যেন এটি এখনও আড়াল হয়ে রয়েছে। যদি আপনি ": সক্রিয়" সিএসএস সিউডো-ক্লাসটি চেষ্টা করে এবং অনুকরণ করেন তবে আমি একই জিনিসটি লক্ষ্য করেছি। আপনি যদি সত্যিই দ্রুত ক্লিক করেন তবে কেবলমাত্র অনমাসডাউন ইভেন্টটি নিবন্ধন করবে। অনমাউসআপ ইভেন্টটি উপেক্ষা করা হবে ... উপাদানটিকে সক্রিয় দেখা যাচ্ছে।
এখানে একটি জেএসফিডেল সমস্যা দেখায়: https://jsfiddle.net/y9swecyu/5/
সমস্যাযুক্ত জেএসফিডেলের ভিডিও: 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')
)