मेरे पास एक इनपुट बॉक्स और खोज परिणाम div है, जब भी मैं कुछ टाइप करता हूं तो मैं परिणाम देखने में सक्षम होता हूं लेकिन जब मैं कुंजियों के माध्यम से नेविगेशन करता हूं तो देखने के लिए स्क्रॉल नहीं हो रहा है।

इसे कैसे प्राप्त किया जा सकता है। मैंने codesanbox में काम करने का उदाहरण बनाया है।

परिदृश्य

  1. इनपुट बॉक्स में "1" टाइप करें
  2. तीसरे तत्व तक नीचे तीर कुंजी पर क्लिक करें आप लाल रंग सीएसएस को हाइलाइट के रूप में देख पाएंगे लेकिन उसके बाद नेविगेशन चल रहा है लेकिन स्क्रॉल नहीं हो रहा है

किसी भी मदद की सराहना की

0
Learner 7 जुलाई 2019, 05:19

1 उत्तर

सबसे बढ़िया उत्तर

ये रहा आपका अपडेटेड सैंडबॉक्स मित्र: https://codesandbox.io/s/react-codesandbox-5fvk9< /ए>

मैंने जो मुख्य चीज़ जोड़ी थी वह थी ref लॉजिक बनाना।

घटक और बाहरी रेंडर () में, हम अपने सभी रेफरी का ट्रैक रखने के लिए एक सरणी परिभाषित करते हैं।

  itemRefs = []

प्रत्येक टैग में उपलब्ध रेफ प्रोप में पास करके वह सरणी .map() में पॉप्युलेट हो जाती है।

{searchResults.map((item, index) => {
    return (
      <li
         ref={ref => (this.itemRefs[index] = ref)}
         onClick={() => this.goToItem(index)}
         className={cursor === index ? 'active' : null}
      >
        <label className="first-lb">{item.id}</label>
        <label className="second-lb">{item.name}</label>
        <label className="third-lb">{item.address}</label>
      </li>
    )
})}

फिर हमारे पास एक ऑनक्लिक-हैंडलर है जो एक रेफरी इंडेक्स स्वीकार करता है, जिसका उपयोग हम उस चयनित आइटम में स्क्रॉल करने के लिए करते हैं।

  goToItem = index => {
    if (this.itemRefs[index]) {
      this.itemRefs[index].scrollIntoView({behavior: 'smooth', nearest: "block"})
    }

    this.setState({
      cursor: index,
    })
  }

इसके अतिरिक्त, स्क्रॉल ईवेंट को एरो-की डाउन और एरो-की अप पर हैंडल करने के लिए।

  _keyDownOnSearchResults = e => {
    const {cursor, searchResults} = this.state
    if (e.keyCode === 38 && cursor > 0) {
      this.itemRefs[cursor - 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor - 1,
      }))
    } else if (e.keyCode === 40 && cursor < searchResults.length - 1) {
      this.itemRefs[cursor + 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor + 1,
      }))
    }
  }
1
Cool Guy 7 जुलाई 2019, 07:04