ড্রপডাউন উপাদানটির বাইরে যখন ক্লিক হয় তখন আমি একটি ড্রপডাউন মেনু বন্ধ করতে চাই।
আমি কেমন করে ঐটি করি?
ড্রপডাউন উপাদানটির বাইরে যখন ক্লিক হয় তখন আমি একটি ড্রপডাউন মেনু বন্ধ করতে চাই।
আমি কেমন করে ঐটি করি?
উত্তর:
উপাদানটিতে আমি এটি যুক্ত করেছি mousedownএবং mouseupপছন্দ করি:
onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}
তারপরে পিতামাতার মধ্যে আমি এটি করি:
componentDidMount: function () {
window.addEventListener('mousedown', this.pageClick, false);
},
pageClick: function (e) {
if (this.mouseIsDownOnCalendar) {
return;
}
this.setState({
showCal: false
});
},
mouseDownHandler: function () {
this.mouseIsDownOnCalendar = true;
},
mouseUpHandler: function () {
this.mouseIsDownOnCalendar = false;
}
showCalএকটি বুলিয়ান যে যখন trueআমার ক্ষেত্রে শো একটি ক্যালেন্ডার এবং falseএটা লুকিয়ে রাখে।
preventDefault()তত্ক্ষণাত্ ইভেন্টগুলি বা নেটিভ অ্যান্ড্রয়েড আচরণটি শুরু করতে হবে যা রিএ্যাক্টের প্রিপ্রোসেসিংয়ে হস্তক্ষেপ করে। আমি npmjs.com/package/react-onclickoutside লিখেছি ।
জীবনচক্রের পদ্ধতিগুলি ব্যবহার করে দস্তাবেজে ইভেন্ট শ্রোতাদের যুক্ত এবং সরিয়ে দেওয়া হয়।
React.createClass({
handleClick: function (e) {
if (this.getDOMNode().contains(e.target)) {
return;
}
},
componentWillMount: function () {
document.addEventListener('click', this.handleClick, false);
},
componentWillUnmount: function () {
document.removeEventListener('click', this.handleClick, false);
}
});
এই উপাদানটির 48-54 লাইনগুলি দেখুন: https://github.com/i- Like-robots/react-tube-tracker/blob/91dc0129a1f6077bef57ea4ad9a860be0c600e9d/app/comp घटक/tube-tracker.jsx#L48-54
ইভেন্টের লক্ষ্যটি দেখুন, যদি ইভেন্টটি সরাসরি উপাদানটিতে বা সেই উপাদানটির বাচ্চাদের উপর থাকে তবে ক্লিকটি ভিতরে ছিল। অন্যথায় এটি বাইরে ছিল।
React.createClass({
clickDocument: function(e) {
var component = React.findDOMNode(this.refs.component);
if (e.target == component || $(component).has(e.target).length) {
// Inside of the component.
} else {
// Outside of the component.
}
},
componentDidMount: function() {
$(document).bind('click', this.clickDocument);
},
componentWillUnmount: function() {
$(document).unbind('click', this.clickDocument);
},
render: function() {
return (
<div ref='component'>
...
</div>
)
}
});
এটি যদি অনেকগুলি উপাদান ব্যবহার করতে হয় তবে এটি মিক্সিন সহ ভাল with
var ClickMixin = {
_clickDocument: function (e) {
var component = React.findDOMNode(this.refs.component);
if (e.target == component || $(component).has(e.target).length) {
this.clickInside(e);
} else {
this.clickOutside(e);
}
},
componentDidMount: function () {
$(document).bind('click', this._clickDocument);
},
componentWillUnmount: function () {
$(document).unbind('click', this._clickDocument);
},
}
এখানে উদাহরণ দেখুন: https://jsfiddle.net/0Lshs7mg/1/
this.refs.component0.14 ফেসবুক.
আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে, বর্তমানে গৃহীত উত্তরটি হ'ল একটি অতিমাত্রায় ইঞ্জিনিয়ারড ered আপনি যদি শুনতে চান যে কোনও ব্যবহারকারী যখন ড্রপডাউন তালিকার বাইরে চলে আসে, কেবলমাত্র <select>মূল উপাদান হিসাবে কোনও উপাদান ব্যবহার করুন এবং এর সাথে একটি onBlurহ্যান্ডলার সংযুক্ত করুন ।
এই পদ্ধতির একমাত্র ত্রুটিগুলি এটি ধরে নেয় যে ব্যবহারকারী ইতিমধ্যে উপাদানটির উপর ফোকাস বজায় রেখেছে, এবং এটি একটি ফর্ম নিয়ন্ত্রণের উপর নির্ভর করে (যা আপনি কী চান তা যদি না হয় তবে আপনি tabকী বিবেচনা করেন এবং কীগুলি উপাদানগুলিকেও ঝাপসা করে urs ) - তবে এই ত্রুটিগুলি আরও জটিল ব্যবহারের ক্ষেত্রে কেবলমাত্র একটি সীমা, এই ক্ষেত্রে আরও জটিল সমাধানের প্রয়োজন হতে পারে।
var Dropdown = React.createClass({
handleBlur: function(e) {
// do something when user clicks outside of this element
},
render: function() {
return (
<select onBlur={this.handleBlur}>
...
</select>
);
}
});
onBlurtabIndex
উপাদানগুলির বাইরে উত্পন্ন ইভেন্টগুলি, প্রতিক্রিয়া-বাইরে-ইভেন্টের জন্য আমি একটি জেনেরিক ইভেন্ট হ্যান্ডলার লিখেছি ।
বাস্তবায়ন নিজেই সহজ:
windowবস্তুর সাথে সংযুক্ত করা হয় ।onOutsideEventলক্ষ্য উপাদানটিতে ট্রিগার করে।import React from 'react';
import ReactDOM from 'react-dom';
/**
* @param {ReactClass} Target The component that defines `onOutsideEvent` handler.
* @param {String[]} supportedEvents A list of valid DOM event names. Default: ['mousedown'].
* @return {ReactClass}
*/
export default (Target, supportedEvents = ['mousedown']) => {
return class ReactOutsideEvent extends React.Component {
componentDidMount = () => {
if (!this.refs.target.onOutsideEvent) {
throw new Error('Component does not defined "onOutsideEvent" method.');
}
supportedEvents.forEach((eventName) => {
window.addEventListener(eventName, this.handleEvent, false);
});
};
componentWillUnmount = () => {
supportedEvents.forEach((eventName) => {
window.removeEventListener(eventName, this.handleEvent, false);
});
};
handleEvent = (event) => {
let target,
targetElement,
isInside,
isOutside;
target = this.refs.target;
targetElement = ReactDOM.findDOMNode(target);
isInside = targetElement.contains(event.target) || targetElement === event.target;
isOutside = !isInside;
if (isOutside) {
target.onOutsideEvent(event);
}
};
render() {
return <Target ref='target' {... this.props} />;
}
}
};
উপাদানটি ব্যবহার করতে, আপনার উচ্চতর অর্ডার উপাদান ব্যবহার করে লক্ষ্য উপাদান উপাদান শ্রেণি ঘোষণাকে মোড়ানো করতে হবে এবং যে ইভেন্টগুলি আপনি পরিচালনা করতে চান তা সংজ্ঞায়িত করতে হবে:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactOutsideEvent from 'react-outside-event';
class Player extends React.Component {
onOutsideEvent = (event) => {
if (event.type === 'mousedown') {
} else if (event.type === 'mouseup') {
}
}
render () {
return <div>Hello, World!</div>;
}
}
export default ReactOutsideEvent(Player, ['mousedown', 'mouseup']);
আমি উত্তরগুলির একটিতে ভোট দিয়েছি যদিও এটি আমার পক্ষে কার্যকর হয়নি। এটি আমাকে এই সমাধানে নিয়ে গেছে। আমি অপারেশনের ক্রমটি কিছুটা পরিবর্তন করেছি। আমি লক্ষ্যটিতে মাউসডাউন এবং লক্ষ্যটিতে মাউসআপের জন্য শুনি। যদি তাদের মধ্যে দুটি সত্যই ফিরে আসে, আমরা মডেলটি বন্ধ করি না। ক্লিকটি নিবন্ধিত হওয়ার সাথে সাথে, যে কোনও জায়গায়, এই দুটি বুলিয়ান {মাউসডাউনঅনমোডাল, মাউসআপঅনমোডাল back মিথ্যাতে ফিরে গেছে।
componentDidMount() {
document.addEventListener('click', this._handlePageClick);
},
componentWillUnmount() {
document.removeEventListener('click', this._handlePageClick);
},
_handlePageClick(e) {
var wasDown = this.mouseDownOnModal;
var wasUp = this.mouseUpOnModal;
this.mouseDownOnModal = false;
this.mouseUpOnModal = false;
if (!wasDown && !wasUp)
this.close();
},
_handleMouseDown() {
this.mouseDownOnModal = true;
},
_handleMouseUp() {
this.mouseUpOnModal = true;
},
render() {
return (
<Modal onMouseDown={this._handleMouseDown} >
onMouseUp={this._handleMouseUp}
{/* other_content_here */}
</Modal>
);
}
এটির সুবিধাটি রয়েছে যে সমস্ত কোড সন্তানের উপাদানগুলির সাথে স্থির থাকে, না পিতামাতার। এর অর্থ এই উপাদানটি পুনরায় ব্যবহার করার সময় কপির জন্য কোনও বয়লারপ্লিট কোড নেই।
.backdrop)।.target) উপাদানটির বাইরে .backdropএবং বৃহত্তর স্ট্যাকিং সূচক ( z-index) সহ।তারপরে .backdropউপাদানটির যে কোনও ক্লিককে " .targetউপাদানটির বাইরে" বিবেচনা করা হবে ।
.click-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.target {
position: relative;
z-index: 2;
}
আপনি refএটি অর্জন করতে ব্যবহার করতে পারেন, নীচের মতো কিছু কাজ করা উচিত।
যোগ refআপনার উপাদানে:
<div ref={(element) => { this.myElement = element; }}></div>
তারপরে আপনি উপাদানটির বাইরের ক্লিকটি পরিচালনা করার জন্য একটি ফাংশন যুক্ত করতে পারেন:
handleClickOutside(e) {
if (!this.myElement.contains(e)) {
this.setState({ myElementVisibility: false });
}
}
তারপরে অবশেষে ইভেন্ট শ্রোতাদের সংযোজন এবং মুছে ফেলবে উইল মাউন্ট হবে এবং আনমাউন্ট হবে।
componentWillMount() {
document.addEventListener('click', this.handleClickOutside, false); // assuming that you already did .bind(this) in constructor
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, false); // assuming that you already did .bind(this) in constructor
}
handleClickOutsideমধ্যে document.addEventListener()যোগ করে thisরেফারেন্স। অন্যথায় দেয় Uncaught ReferenceError: handleClickOutside সংজ্ঞায়িত করা হয় না এcomponentWillMount()
পার্টিতে দেরি হয়ে গেছে, তবে ড্রপডাউন বন্ধ করার জন্য সম্পর্কিত কোডের সাথে ড্রপডাউনটির মূল উপাদানটির উপর একটি অস্পষ্ট ইভেন্ট সেট করার ক্ষেত্রে আমি সাফল্য পেয়েছি, এবং প্যারেন্ট উপাদানটির কাছে একটি মোসডাউন শ্রোতাকে সংযুক্ত করে যা ড্রপডাউনটি খোলা আছে কিনা তা পরীক্ষা করে দেখায় বা না, এবং এটি খোলার পরে ইভেন্টের প্রচার বন্ধ করে দেবে যাতে অস্পষ্ট ইভেন্টটি ট্রিগার হয় না।
যেহেতু মোডাউনড ইভেন্টটি বুদবুদ হয়ে যায় এটি বাচ্চাদের উপর যে কোনও শৈশবকে পিতামাতার উপর ঝাপসা হওয়া থেকে আটকাবে।
/* Some react component */
...
showFoo = () => this.setState({ showFoo: true });
hideFoo = () => this.setState({ showFoo: false });
clicked = e => {
if (!this.state.showFoo) {
this.showFoo();
return;
}
e.preventDefault()
e.stopPropagation()
}
render() {
return (
<div
onFocus={this.showFoo}
onBlur={this.hideFoo}
onMouseDown={this.clicked}
>
{this.state.showFoo ? <FooComponent /> : null}
</div>
)
}
...
e.preventDefault () যতক্ষণ না আমি যুক্তি বলতে পারি কল করা উচিত নয় তবে ফায়ারফক্স কোনও কারণ ছাড়াই এটি খেলতে পারে না। ক্রোম, ফায়ারফক্স এবং সাফারিতে কাজ করে।
আমি এই সম্পর্কে একটি সহজ উপায় খুঁজে।
আপনার কেবলমাত্র onHide(this.closeFunction)মডেলটি যুক্ত করতে হবে
<Modal onHide={this.closeFunction}>
...
</Modal>
ধরে নিচ্ছি মডেলটি বন্ধ করার জন্য আপনার একটি ফাংশন রয়েছে।
চমৎকার প্রতিক্রিয়া-অনক্লিকআউটসাইড মিক্সিন ব্যবহার করুন :
npm install --save react-onclickoutside
এবং তারপর
var Component = React.createClass({
mixins: [
require('react-onclickoutside')
],
handleClickOutside: function(evt) {
// ...handling code goes here...
}
});