प्रतिक्रिया

Question

में बाल घटकों पर ध्यान केंद्रित करने का क्लीनर तरीका मैं प्रतिक्रिया का उपयोग कर इनपुट की सूची में फोकस ऊपर और नीचे स्थानांतरित करने के लिए तीर कुंजियों का उपयोग करने के लिए एक क्लीनर तरीका जानने का प्रयास कर रहा हूं। सूची मूल घटक है, बच्चों को इनपुट करें। यह पता लगाने के लिए कि अगला इनपुट किस पर ध्यान केंद्रित किया जाना चाहिए, मैं प्रत्येक बच्चे को ref के साथ-साथ एक संख्यात्मक id दे रहा हूं जिसे मैं ऑर्डर करने के लिए उपयोग करता हूं। जब एक तीर कुंजी का पता लगाया जाता है, तो कॉलबैक तब बच्चे को सही ref के साथ पाता है और इनपुट को पकड़ने और इसे ध्यान देने के लिए उस बच्चे के refs में जाता है।

मैं प्रतिक्रिया में नया हूं, यह काफी गंदा लगता है, इस प्रकार मैं सोच रहा हूं कि क्लीनर समाधान है या नहीं।

कोड और काम jsfiddle:

var Child = React.createClass({ 
    handleUp: function(e) { 
     switch(e.key) { 
      case "ArrowDown": 
       this.props.handleFocus(this.props.id+1); 
      break; 
      case "ArrowUp": 
       this.props.handleFocus(this.props.id-1);    
      break; 
     } 
    }, 
    render: function() { 
     return <div><input defaultValue={this.props.name} onKeyUp={this.handleUp} ref="input" /></div>; 
    } 
}); 

var Parent = React.createClass({ 
    handleFocus: function(id) { 
     var child = this.refs['child' + id]; 
     if (!child) return; 
     var input = child.refs.input; 
     input.getDOMNode().focus(); 
    }, 
    render: function() { 
     var inputs = []; 
     for (var i=0; i<10; i++) { 
      inputs.push(<Child key={i} id={i} name={"value" + i} handleFocus={this.handleFocus} ref={'child' + i} />); 
     } 
     return <div> 
      {inputs} 
     </div>; 
    } 
}); 

http://jsfiddle.net/69z2wepo/509/

Answer 1

ऐसा करने के कई तरीके हैं, लेकिन कोई भी इस से वास्तव में 'बेहतर' कर रहे हैं।

विकल्प एक मिश्रण का उपयोग करेंगे, लेकिन इससे छोटे लाभ के लिए ब्लैक बॉक्स अबास्ट्रक्शन की मानसिक लागत में आती है। मैं इसे बस रखता हूं।