কোনও ইনপুট ফাঁকা থাকলে কীভাবে একটি বোতাম অক্ষম করবেন?

168

আমি React.js এ নতুন, দুঃখিত যদি প্রশ্নটি আপনার কাছে খুব বোকা মনে হয়।

আমি যখন একটি ইনপুট ক্ষেত্রটি খালি থাকে তখন আমি একটি বোতামটি অক্ষম করার চেষ্টা করছি। এটির জন্য প্রতিক্রিয়া জানাতে কী beest পদ্ধতির?

আমি নিম্নলিখিত মত কিছু করছি:

<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

দুর্দান্ত, উদাহরণটি দৌড়ায় এবং সবকিছু। সুন্দর সম্পূর্ণ উদাহরণ এবং চমৎকার ইন্টারেক্টিভ ডেমো, সুতরাং।

— চার 43

1

এই অভ্যাসটি কাজ করবে না, কারণ disabledকোনও উপাদানকে নিছক সংযুক্ত করে বোঝানো হচ্ছে যে উপাদানটি অক্ষম করতে হবে। এটি একটি বুল নয়। এটি দেখুন: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…

— কায়োট

4

@ কেয়েট যা প্রতিক্রিয়াটির জন্য সত্য নয়। এই ট্যাগগুলি এইচটিএমএল নয়, তারা জেএসএক্স। এবং জেএসএক্সে, যদি কোনও বৈশিষ্ট্যকে মিথ্যা নির্ধারিত করা হয়, এইচটিএমএল রূপান্তর করার সময় এটি সম্পূর্ণরূপে সরানো হয়। আপনি কেবল নিজের উপরে থাকা মন্তব্যটিকে উপেক্ষা করেছেন যা বলে যে এটি পুরোপুরি চলে?

— বেন ব্যারন

2

@ বেনবারন স্পষ্টির জন্য ধন্যবাদ। আমি কোথায় / কীভাবে এটি ব্যবহার করেছি তা মনে নেই, তবে আমার কয়েকটি সমস্যা ছিল। আমি আপনার মন্তব্যটিকে সমর্থন করছি যাতে অন্যরা জানতে পারে যে এই পদ্ধতিটি মানুষের অভিজ্ঞতার ভিত্তিতে সঠিক পদ্ধতি।

— কায়োট

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

       }

   }

— কের্তি গ
সূত্র