React.js: इनपुट खाली होने पर बटन अक्षम करें

Question

मैं React.js के लिए नया हूं, क्षमा करें अगर प्रश्न आपके लिए बहुत बेवकूफ लगता है।

मैं इनपुट फ़ील्ड खाली होने पर एक बटन को अक्षम करने का प्रयास कर रहा हूं। इसके लिए प्रतिक्रिया में सबसे बढ़िया दृष्टिकोण क्या है?

<input ref="email"/> 

<button disabled={!this.refs.email}>Let me in</button> 

यह सही है:

मैं निम्नलिखित की तरह कुछ कर रहा हूँ?

यह गतिशील विशेषता का सिर्फ डुप्लिकेशंस नहीं है, क्योंकि मैं डेटा को एक तत्व से दूसरे में स्थानांतरित/जांचने के बारे में भी उत्सुक हूं।

Answer 1

आप, या < को अपने ऐप्लिकेशन के राज्य प्रबंधन समाधान यहाँ (अपने मूल्य up to a parent via a callback function, या sideways में राज्य में इनपुट के वर्तमान मूल्य रखने या परिवर्तन में उत्तीर्ण होना होगा > ऐसी है कि यह अंततः में वापस पारित हो अपने एक प्रोप के रूप में घटक) ताकि आप बटन के लिए अक्षम प्रोप प्राप्त कर सकें।

उदाहरण राज्य का उपयोग:

<meta charset="UTF-8"> 
 
<script src="https://fb.me/react-0.13.3.js"></script> 
 
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
 
<div id="app"></div> 
 
<script type="text/jsx;harmony=true">void function() { "use strict"; 
 

 
var App = React.createClass({ 
 
    getInitialState() { 
 
    return {email: ''} 
 
    }, 
 
    handleChange(e) { 
 
    this.setState({email: e.target.value}) 
 
    }, 
 
    render() { 
 
    return <div> 
 
     <input name="email" value={this.state.email} onChange={this.handleChange}/> 
 
     <button type="button" disabled={!this.state.email}>Button</button> 
 
    </div> 
 
    } 
 
}) 
 

 
React.render(<App/>, document.getElementById('app')) 
 

 
}()</script>

[ReactJS में गतिशील विशेषता] की