React.js में बटन को कैसे निष्क्रिय करें

Question

मेरे पास यह घटक है:

import React from 'react';

export default class AddItem extends React.Component {

add() {
    this.props.onButtonClick(this.input.value);
    this.input.value = '';
}


render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

}

मैं चाहता हूं कि इनपुट मान रिक्त होने पर बटन अक्षम हो जाए। लेकिन ऊपर कोड काम नहीं करता है। इसे कहते हैं:

add-item.component.js: 78 अनकैप्ड टाइपर्रर: अपरिभाषित की संपत्ति 'मान' नहीं पढ़ सकता

की ओर इशारा करते हुए disabled={!this.input.value}। मैं यहां क्या गलत कर सकता हूं? मैं अनुमान लगा रहा हूं कि शायद renderविधि अभी तक निष्पादित नहीं हुई है। यदि, तो वर्कअराउंड क्या है?

Answer 1

उपयोग करना refsसबसे अच्छा अभ्यास नहीं है क्योंकि यह सीधे DOM को पढ़ता है, इसके stateबजाय React का उपयोग करना बेहतर है । साथ ही, आपका बटन परिवर्तित नहीं होता है क्योंकि घटक पुन: प्रदान नहीं किया जाता है और अपनी प्रारंभिक स्थिति में रहता है।

हर बार इनपुट फ़ील्ड में परिवर्तन होने पर घटक को फिर से प्रस्तुत करने के लिए आप इवेंट श्रोता के setStateसाथ मिलकर उपयोग कर सकते हैं onChange:

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />

// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

यहाँ एक काम कर उदाहरण है:

class AddItem extends React.Component {
  constructor() {
    super();
    this.state = { value: '' };
    this.onChange = this.onChange.bind(this);
    this.add = this.add.bind(this);
  }

  add() {
    this.props.onButtonClick(this.state.value);
    this.setState({ value: '' });
  }

  onChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div className="add-item">
        <input
          type="text"
          className="add-item__input"
          value={this.state.value}
          onChange={this.onChange}
          placeholder={this.props.placeholder}
        />
        <button
          disabled={!this.state.value}
          className="add-item__button"
          onClick={this.add}
        >
          Add
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <AddItem placeholder="Value" onButtonClick={v => console.log(v)} />,
  document.getElementById('View')
);

<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>
<div id='View'></div>

Comments

यह सही जवाब है! इनपुट के परिवर्तन पर अद्यतन करने के लिए आंतरिक स्थिति का उपयोग किया जाना चाहिए और बटन को बस इस के खिलाफ जांच करनी चाहिए। +1

— माइकल जियोवानी पुमो

इस.स्टेट की एक सीमा है कि यह यूआई को फिर से प्रस्तुत करता है इसलिए यदि आप चाइल्ड कंपोनेंट में टेक्स्ट बॉक्स में टाइप कर रहे हैं और ऑनकॉन्ग इवेंट के लिए बाध्य है, तो यह टेक्स्टबॉक्स से फोकस खो देता है। यदि यह एक ही घटक में है तो यह ठीक है लेकिन जब एक बच्चे के घटक में उपयोग किया जाता है तो यह फोकस खो देता है।

— गतिशील

@ डायनामिक ऐसा नहीं होना चाहिए। क्या आपके पास इसका एक कार्यशील उदाहरण है?

— फैबियन शुल्ज़

सिर्फ FYI करें यह क्रॉस-ब्राउज़र फ्रेंडली नहीं है। कई ब्राउज़र अभी भी अक्षम की उपस्थिति की व्याख्या करते हैं, भले ही वह असत्य पर सेट हो। यह सचमुच की तरह सिर्फ विकलांग की उपस्थिति के लिए जाँच करता है। आपको क्रॉस-ब्राउज़र फ्रेंडली होने के लिए अक्षम विशेषता को हटाना होगा।

— एड्रिनोपोलिस

@ Adrianopolis React disabledDOM से विशेषता हटाता है यदि यह सेट किया गया falseहै - यह क्रॉस-ब्राउज़र फ्रेंडली है।

— फाबियन शुल्त्स

Answer 2

HTML में,

<button disabled/>
<buttton disabled="true">
<buttton disabled="false">
<buttton disabled="21">

वे सभी अक्षम = "सत्य" पर उबलते हैं, क्योंकि यह एक गैर-रिक्त स्ट्रिंग के लिए सही है। इसलिए, गलत तरीके से वापस जाने के लिए, इस जैसे सशर्त कथन में एक खाली स्ट्रिंग पास करें । "सच्चा": "" ।

render() {
    return (
        <div className="add-item">
            <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} />
            <button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>
        </div>
    );
}

Comments

अगर ढेर-अतिप्रवाह सहायक जवाब का एक विकल्प होता है, मैं इस उत्तर का चयन होगा

— Feras

Answer 3

आपको refs के माध्यम से इनपुट का मान सेट नहीं करना चाहिए।

नियंत्रित प्रपत्र घटकों के लिए दस्तावेज़ीकरण पर एक नज़र डालें - https://facebook.github.io/react/docs/forms.html#controlled-compenders

संक्षेप में

<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />

तब आप उपयोग करके अक्षम अवस्था को नियंत्रित कर सकेंगे disabled={!this.state.value}

Answer 4

कुछ विशिष्ट तरीके हैं कि हम कैसे रिएक्ट में रेंडर घटकों को नियंत्रित करते हैं।

लेकिन, मैंने इनमें से किसी का भी उपयोग यहां नहीं किया है, मैंने सिर्फ रेफरी के नामपेस बच्चों को घटक के लिए उपयोग किया है।

class AddItem extends React.Component {
    change(e) {
      if ("" != e.target.value) {
        this.button.disabled = false;
      } else {
        this.button.disabled = true;
      }
    }

    add(e) {
      console.log(this.input.value);
      this.input.value = '';
      this.button.disabled = true;
    }

    render() {
        return (
          <div className="add-item">
          <input type="text" className = "add-item__input" ref = {(input) => this.input=input} onChange = {this.change.bind(this)} />
          
          <button className="add-item__button" 
          onClick= {this.add.bind(this)} 
          ref={(button) => this.button=button}>Add
          </button>
          </div>
        );
    }
}

ReactDOM.render(<AddItem / > , document.getElementById('root'));

<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>
<div id="root"></div>

Answer 5

this.inputrefकॉलबैक कहे जाने तक अपरिभाषित है। सेटिंग का प्रयास करेंthis.inputअपने निर्माता में कुछ प्रारंभिक मूल्य पर करने का ।

से refs पर डॉक्स प्रतिक्रिया , जोर मेरा:

घटक के माउंट होने या अनमाउंट होने के तुरंत बाद कॉलबैक निष्पादित किया जाएगा

Answer 6

इसके लिए बहुत सरल उपाय useRefहुक का उपयोग करके है

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

इसी तरह आप बटन का उपयोग करके सक्षम कर सकते हैं buttonRef.current.disabled = false

Answer 7

मुझे एक ऐसी ही समस्या हुई है, पता चलता है कि हमें ऐसा करने के लिए हुक की आवश्यकता नहीं है, हम एक सशर्त रेंडर कर सकते हैं और यह अभी भी ठीक काम करेगा।

<Button
    type="submit"
    disabled={
        name === "" || email === "" || password === "" ? true : false
    }
    fullWidth
    variant="contained"
    color="primary"
    className={classes.submit}>
    SignUP
</Button>

Answer 8

बस जोड़ दो:

<button disabled={this.input.value?"true":""} className="add-item__button" onClick={this.add.bind(this)}>Add</button>