কীভাবে React.js এ বোতামটি অক্ষম করবেন

Question 1

আমার এই উপাদানটি রয়েছে:

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>
    );
}

}

আমি চাই যখন ইনপুট মানটি খালি থাকে তখন বোতামটি অক্ষম হয়ে যায়। তবে উপরের কোডটি কাজ করে না। এটা বলে:

অ্যাড-আইটেম ডেস্কটপ.এনএসএস: Un 78 আনকচড টাইপ এরিয়ার: অপরিশোধিত এর সম্পত্তি 'মান' পড়তে পারে না

নির্দেশিত disabled={!this.input.value}। এখানে আমি কী ভুল করছি? আমি অনুমান করছি যে renderপদ্ধতিটি কার্যকর করার সময় সম্ভবত রেফ এখনও তৈরি হয়নি । যদি তাই হয়, তাহলে কাজের ক্ষেত্র কী?

Question 2

ব্যবহার refsকরা সর্বোত্তম অনুশীলন নয় কারণ এটি সরাসরি ডম পড়েন, stateপরিবর্তে প্রতিক্রিয়া ব্যবহার করা আরও ভাল । এছাড়াও, আপনার বোতামটি পরিবর্তন হয় না কারণ উপাদানটি পুনরায় রেন্ডার হয় না এবং এটি প্রাথমিক অবস্থায় থাকে।

ইনপুট ক্ষেত্রটি প্রতিবার পরিবর্তিত হয়ে পুনরায় উপাদানটি রেন্ডার করতে আপনি ইভেন্ট শ্রোতার 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>

স্নিপেট প্রসারিত করুন

Question 3

এইচটিএমএল এ,

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

এগুলির সমস্তগুলি অক্ষম = "সত্য" এ ফোটে কারণ এটি খালি খালি স্ট্রিংয়ের জন্য সত্য ফিরে আসে। সুতরাং, মিথ্যা প্রত্যাবর্তনের জন্য শর্তসাপূর্ণ স্টেটমেন্টে এই শংসাপত্রের একটি ফাঁকা স্ট্রিংটি পাস করুন। Indue.value? "True": "" ।

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>
    );
}

Question 4

আপনার রেফার মাধ্যমে ইনপুটটির মান নির্ধারণ করা উচিত নয়।

নিয়ন্ত্রিত ফর্ম উপাদানগুলির জন্য ডকুমেন্টেশনটি এখানে দেখুন - https://facebook.github.io/react/docs/forms.html# নিয়ন্ত্রণে- কম্পোনেন্ট

সংক্ষেপে

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

তারপরে আপনি ব্যবহার করে অক্ষম রাষ্ট্র নিয়ন্ত্রণ করতে সক্ষম হবেন disabled={!this.state.value}

Question 5

প্রতিক্রিয়াতে উপাদানগুলি রেন্ডারকে কীভাবে নিয়ন্ত্রণ করতে হয় তার কয়েকটি সাধারণ পদ্ধতি রয়েছে।

তবে, আমি এগুলির কোনও এখানে ব্যবহার করি নি, আমি কেবলমাত্র উপাদানটির অন্তর্নিহিত শিশুদের নাম স্থানের জন্য রেফ ব্যবহার করেছি।

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>

স্নিপেট প্রসারিত করুন

Question 6

this.inputrefকলব্যাক কল না করা অবধি সংজ্ঞায়িত । this.inputআপনার কনস্ট্রাক্টরের কিছু প্রাথমিক মান সেট করার চেষ্টা করুন ।

রেফের উপর প্রতিক্রিয়া দস্তাবেজগুলি থেকে , জোর আমার:

কলব্যাক অবিলম্বে মৃত্যুদন্ড কার্যকর করা হবে পরে উপাদান মাউন্ট বা আনমাউন্ট

Question 7

আমারও একই রকম সমস্যা হয়েছে, দেখা যাচ্ছে এগুলি করার জন্য আমাদের হুকের দরকার নেই, আমরা শর্তসাপেক্ষে রেন্ডার তৈরি করতে পারি এবং এটি এখনও ঠিক কাজ করবে।

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

Question 8

এর জন্য খুব সহজ সমাধান 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

Question 9

শুধু যোগ কর:

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