इनपुट खाली होने पर बटन को निष्क्रिय कैसे करें?

168

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

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

<input ref="email"/>

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

क्या ये सही है?

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

reactjs

— स्टेपन सुवरोव
स्रोत

3

ReactJS में डायनामिक विशेषता

— WiredPrairie

257

आपको इनपुट के वर्तमान मूल्य को राज्य में रखने की आवश्यकता होगी (या कॉलबैक फ़ंक्शन , या बग़ल में , या <अपने ऐप के राज्य प्रबंधन समाधान के माध्यम से माता-पिता तक इसके मूल्य में परिवर्तन को पास करें> जैसे कि यह अंत में वापस पास हो जाता है। आपके घटक एक प्रोप के रूप में) ताकि आप बटन के लिए अक्षम प्रोप को प्राप्त कर सकें।

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

<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>

स्निपेट का विस्तार करें

— जॉनी बुकानन
स्रोत

3

बहुत बढ़िया, उदाहरण सब कुछ चलता है। अच्छा पूर्ण उदाहरण और अच्छा इंटरैक्टिव डेमो, एसओ।

— चार ४३

1

यह अभ्यस्त काम है disabled, क्योंकि केवल एक तत्व से जुड़ा होने का मतलब है कि तत्व को अक्षम करना है। यह एक बूल नहीं है। इसे देखें: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…

— Kayote

4

@Kayote जो रिएक्ट के लिए सही नहीं है। वे टैग HTML नहीं हैं, वे JSX हैं। और JSX में, यदि कोई विशेषता झूठी असाइन की गई है, तो HTML में कनवर्ट करते समय इसे पूरी तरह से हटा दिया जाता है। क्या आपने अभी-अभी आपके ऊपर टिप्पणी को अनदेखा किया है जो कहता है कि यह पूरी तरह से चलता है?

— बेन बैरन

2

@BenBaron स्पष्टीकरण के लिए धन्यवाद। मुझे याद नहीं है कि मैंने इसका उपयोग कहां / कैसे किया था, हालांकि, मेरे पास कुछ मुद्दे थे। Im आपकी टिप्पणी को बढ़ा रहा है ताकि अन्य लोग जान सकें कि यह विधि लोगों के अनुभव के आधार पर सही विधि है।

— केयोट

3

@ अगर मैं टिप्पणी के अंतिम भाग के साथ थोड़ा असभ्य आया, तो धन्यवाद और क्षमा करें। यह वास्तव में एक लंबा दिन था।

— बेन बैरन

8

स्थिरांक का उपयोग करके सत्यापन के लिए कई क्षेत्रों को संयोजित करने की अनुमति मिलती है:

class LoginFrm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: '',
      password: '',
    };
  }
  
  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  }
  
  handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
  }
  
  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Welcome ${email} password: ${password}`);
  }
  
  render() {
    const { email, password } = this.state;
    const enabled =
          email.length > 0 &&
          password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!enabled}>Login</button>
      </form>
    )
  }
}

ReactDOM.render(<LoginFrm />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>


</body>

स्निपेट का विस्तार करें

— Gi1ber7
स्रोत

7

चेक करने का दूसरा तरीका फ़ंक्शन को इनलाइन करना है, ताकि हर रेंडर (हर प्रॉपर और स्टेट्स चेंज) पर कंडीशन चेक हो जाए

const isDisabled = () => 
  // condition check

यह काम:

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

लेकिन यह काम नहीं करेगा:

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>

— मार्क स्लॉथ ईस्टमैन
स्रोत

-1

इसके सरल आइए हम मान लें कि आपने कंपोनेंट का विस्तार करके एक पूर्ण श्रेणी बनाई है जिसमें निम्नलिखित शामिल हैं

class DisableButton extends Components 
   {

      constructor()
       {
         super();
         // now set the initial state of button enable and disable to be false
          this.state = {isEnable: false }
       }

  // this function checks the length and make button to be enable by updating the state
     handleButtonEnable(event)
       {
         const value = this.target.value;
         if(value.length > 0 )
        {
          // set the state of isEnable to be true to make the button to be enable
          this.setState({isEnable : true})
        }


       }

      // in render you having button and input 
     render() 
       {
          return (
             <div>
                <input
                   placeholder={"ANY_PLACEHOLDER"}
                   onChange={this.handleChangePassword}

                  />

               <button 
               onClick ={this.someFunction}
               disabled = {this.state.isEnable} 
              /> 

             <div/>
            )

       }

   }

— कीर्ति सी
स्रोत