मेरे पास 7 दृश्य (विभिन्न डेटासेट) के बीच स्विच करने के लिए 7 <input type="button"/>s हैं। अब मैं उस बटन को हाइलाइट करना चाहता हूं, जिसे क्लिक किया गया है, और कौन सा दृश्य दिखाया गया है। नीचे उदाहरण:

Example

const [view,setView]=useState()

<input type="button" onClick={()=>{setView("view1")}} value="View1"/>
<input type="button" onClick={()=>{setView("view2")}} value="View2"/>
<input type="button" onClick={()=>{setView("view3")}} value="View3"/>
...

// for showing the corresponding view
{view==="view1"&& //show view1}
{view==="view2"&& //show view2}
...

मैंने इसे सीएसएस में :focus संपत्ति के साथ किया था, लेकिन जब मैं कहीं और क्लिक करता हूं, तो फोकस स्पष्ट रूप से बटन पर नहीं होता है, जबकि दृश्य अभी भी दिखाया जाता है। जब तक दृश्य दिखाया जाता है, क्या बटन को हाइलाइट रखने के बारे में कोई सुझाव हैं?

0
OttherCreek 8 जून 2020, 18:44
कृपया अपना कोड प्रदान करें, ताकि समुदाय आपकी सहायता कर सके
 – 
Vaibhav
8 जून 2020, 18:56

2 जवाब

मैंने इसे बहुत आसान हल किया। मैंने अपने "राज्य" के सक्रिय दृश्य के आधार पर प्रत्येक बटन में एक इनलाइन स्टाइल जोड़ा:

<input type="button" style={{backgroundColor:(view=="view1")?"purple":"grey"}} onClick={()=>{setView("view1")}} value="View1"/>
<input type="button" style={{backgroundColor:(view=="view2")?"purple":"grey"}} onClick={()=>{setView("view2")}} value="View2"/>
<input type="button" style={{backgroundColor:(view=="view3")?"purple":"grey"}} onClick={()=>{setView("view3")}} value="View3"/>
0
OttherCreek 8 जून 2020, 19:09

आपके "व्यू" वेरिएबल में वह जानकारी है जो आपको यह करने के लिए चाहिए। आपका प्रत्येक दृश्य बटन यह देखने के लिए जांच कर सकता है कि क्या वे सक्रिय हैं, और यदि वे स्वयं को सक्रिय वर्ग देते हैं।

<input
  type="button"
  onClick={/** Your callback */}
  className={view === "view1" ? "active" : null}
  value="View1"
/>

फिर: फोकस का उपयोग करने के बजाय, आपका सीएसएस .active का उपयोग कर सकता है। :फोकस का एक संकीर्ण और सुपरिभाषित दायरा है। उस उपयोग को बढ़ाने की कोशिश करने से शायद कोड और ब्राउज़र असंगति को पढ़ने में मुश्किल होगी।

साथ ही, और संयोग से, आप निम्न की तरह अपने बटन बनाने के लिए लूप का उपयोग कर सकते हैं।

const buttons = [];
for(let i = 0; i < 7; i++) {
  const viewId = `view${i}`;
  buttons.push(<input
    key={i}
    type="button" 
    onClick={()=>{setView(viewId)}
    className={viewId === view ? "active" : null}
    value=`View${i}`
  />);
}

फिर अपनी वापसी में {buttons} का प्रयोग करें।

0
Charles Bamford 8 जून 2020, 19:15