বিক্রিয় উপাদানটির বুলিয়ান অবস্থা কীভাবে টগল করা যায়?

Question

আমি কীভাবে প্রতিক্রিয়ার উপাদানগুলির বুলিয়ান রাষ্ট্র টগল করতে হয় তা জানতে চাই। এই ক্ষেত্রে:

আমার উপাদানটির নির্মাতায় আমার বুলিয়ান রাজ্য পরীক্ষা আছে:

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

আমি এই.সেট স্টেট পদ্ধতিটি ব্যবহার করে প্রতিবার আমার চেকবক্সটি ক্লিক করার সাথে সাথে রাষ্ট্রটি টগল করার চেষ্টা করছি:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>

অবশ্যই আমি একটি অপ্রকাশিত রেফারেন্স এরির পেয়েছি: চেক সংজ্ঞায়িত করা হয়নি । তাহলে আমি কীভাবে এটি অর্জন করতে পারি?

অগ্রিম ধন্যবাদ.

Comments

এটি ঠিক যেমনটি বলেছে, চেকটি অপরিজ্ঞাত। আপনি সম্ভবত লিখতে বোঝানো this.state.checkমধ্যে this.setState({check: !check.value})। এবং চেকবাক্সের জন্য পরীক্ষিত সম্পত্তি যুক্ত করুন যা উপাদানগুলির অবস্থা অনুযায়ী পরিবর্তন হবে। checked={this.state.checked}

— ভিনকাস স্টোনিস

Answer 1

যেহেতু কেউ এটি পোস্ট করেনি, তাই সঠিক উত্তর পোস্ট করছি। যদি আপনার নতুন রাষ্ট্রের আপডেটটি পূর্ববর্তী অবস্থার উপর নির্ভর করে তবে সর্বদা কার্যকরী ফর্মটি ব্যবহার করুন setStateযার যুক্তি হিসাবে কোনও ফাংশন নতুন রাষ্ট্রকে ফিরিয়ে দেয়।

তোমার ক্ষেত্রে:

this.setState(prevState => ({
  check: !prevState.check
}));

দস্তাবেজগুলি দেখুন

---

যেহেতু এই উত্তরটি জনপ্রিয় হয়ে উঠছে, এমন দৃষ্টিভঙ্গি যুক্ত করুন যা প্রতিক্রিয়া হুকের জন্য ব্যবহার করা উচিত (v16.8 +):

আপনি যদি useStateহুক ব্যবহার করছেন তবে নিম্নলিখিত কোডটি ব্যবহার করুন (যদি আপনার নতুন রাজ্যটি পূর্বের রাজ্যের উপর নির্ভর করে):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => prevCheck + 1);

Comments

এটি সরাসরি ব্যবহারের চেয়ে কেন ভাল this.setState({check: !this.state.check})?

— সানিপ্রো

@ সানিপ্রো লিঙ্কযুক্ত ডকস পড়ুন এবং আপনি আপনার উত্তর খুঁজে পাবেন। টিএল; ডিআর কলগুলির সাথে একত্রে বাছাই করে রাষ্ট্র সেট করার জন্য প্রতিক্রিয়া জানায়। সুতরাং একটি সাধারণ ইনক্রিমেন্ট ফাংশন increment = () => this.setState({count: this.state.count + 1});এবং কোডের একটি ব্লকটি কল্পনা করুন : increment(); increment(); increment();এখন প্রতিক্রিয়াগুলি এর সাথে সামঞ্জস্যপূর্ণ কিছুতে ব্যাচ করতে পারে: setNewState = (oldState) => { newState.count = oldState.count + 1; newState.count = oldState.count + 1; newState.count = oldState.count + 1; return newState; } দেখুন সমস্যাটি কোথায় আছে?

— ড্রিউ রিিজ

আমার যদি পূর্বের রাজ্যের উপর নির্ভর করে না এমন অন্যান্য রাজ্য সম্পত্তিগুলি আপডেট করার দরকার হয় তবে? উদাহরণস্বরূপ একটি পপওভার বার্তা টগিং করা, সত্য / মিথ্যা হিসাবে দৃশ্যমান সহ কিন্তু বার্তা রাষ্ট্রের উপর নির্ভর করে পরিবর্তিত হয়?

— হামচেনিজ

@ হ্যামসিহিজ ফাংশনের রিটার্ন মান হ'ল যাইহোক আপনার নতুন রাষ্ট্র। আপনি পূর্বের অবস্থা থেকে মানগুলি ব্যবহার করতে বা নাও ব্যবহার করতে পারেন; যাতে আপনি কোনও মান যেমন বিভিন্ন বার্তা পাঠাতে পারেন can

— ডেন

Answer 2

আপনার this.state.checkপরিবর্তে check.valueএখানে ব্যবহার করা উচিত :

this.setState({check: !this.state.check})

তবে যাইহোক যাইহোক এটি এইভাবে করা খারাপ অভ্যাস । এটিকে আলাদা পদ্ধতিতে স্থানান্তরিত করা এবং মার্কআপে সরাসরি কলব্যাকগুলি লিখবেন না M

Comments

উত্সাহিত, কিন্তু কৌতূহলের বাইরে - কেন এই "খারাপ অভ্যাস"?

— সহযোদ্ধা

এটি কেবল খারাপ অভ্যাস নয়, তবে আপনি পছন্দসই ফলাফলও পাবেন না, যেমন setStateঅ্যাসিঙ্ক । আমার উত্তর নীচে দেখুন।

— ডেন

আমি মনে করি যে নতুন রাজ্যটি পূর্বের রাজ্যের উপর নির্ভরশীল এমন ক্ষেত্রে রিএ্যাক্টের এপিআই ব্যবহার করার কারণে এটি ড্যানের উত্তরটির আরও ভাল পন্থা অর্জন করতে পারে।

— এমটি

@ এমটি কিন্তু তারপর, আমি বছর পরে উত্তর। সেখানে আছে :)

— ডেন

যেহেতু এই স্টেটটি অবিচ্ছিন্ন, তাই আপনার পরবর্তী অবস্থার আপডেট করার জন্য কখনই এর মানের উপর নির্ভর করা উচিত নয়। @ ডেনের পরামর্শ অনুসারে ফাংশন কলব্যাক ব্যবহার করুন।

— ডাঃ ইউনস হেনি

Answer 3

checkedমান পেতে ব্যবহার করুন । সময় onChange, checkedহবে trueএবং এটি এক ধরণের হবে boolean।

আশাকরি এটা সাহায্য করবে!

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))

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

Answer 4

হুক ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে (প্রতিক্রিয়া> = 16.8.0 প্রয়োজন)

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

Answer 5

আপনি useStateকোনও ক্রিয়াকলাপের উপাদানটির জন্য স্থানীয় অবস্থা ঘোষণার জন্য প্রতিক্রিয়াটির হুকও ব্যবহার করতে পারেন । ভেরিয়েবলের প্রাথমিক অবস্থাটি toggledপদ্ধতির আর্গুমেন্ট হিসাবে পাস করা হয়েছে .useState।

import { render } from 'react-dom';
import React from "react";

type Props = {
  text: string,
  onClick(event: React.MouseEvent<HTMLButtonElement>): void,
};

export function HelloWorldButton(props: Props) {
  const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it
  return <button
  onClick={(event) => {
    setToggled(!toggled);
    props.onClick(event);
  }}
  >{props.text} (toggled: {toggled.toString()})</button>;
}


render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));

https://stackblitz.com/edit/react-ts-qga3vc

Answer 6

চেষ্টা করুন:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

ব্যবহারের check: !check.valueঅর্থ এটি সেই checkঅবজেক্টটির সন্ধান করছে যা আপনি ঘোষণা করেন নি।

আপনি উল্লেখ করতে হবে যে আপনি এর বিপরীত মান চান this.state.check।

Answer 7

বুলিয়ান মানগুলি টগল করার সময় আমি এটি সর্বাধিক সহজ খুঁজে পেয়েছি। সহজভাবে বলতে যদি মানটি ইতিমধ্যে সত্য হয় তবে এটি এটিকে মিথ্যা এবং বিপরীতে সেট করে। অপরিজ্ঞাত ত্রুটিগুলি থেকে সাবধান থাকুন, নির্বাহের আগে আপনার সম্পত্তিটি সংজ্ঞায়িত করা হয়েছে তা নিশ্চিত করুন

this.setState({
   propertyName: this.propertyName = !this.propertyName
});

Answer 8

আপনার প্রসঙ্গে নির্ভর করে; এটি আপনাকে মাউসএন্টার ফাংশন প্রদত্ত রাষ্ট্র আপডেট করার অনুমতি দেবে। যে কোনও উপায়ে, রাষ্ট্রীয় মানটিকে সত্য হিসাবে নির্ধারণ করে: মিথ্যা আপনি যে কোনও কার্যের সাথে প্রদত্ত রাষ্ট্রীয় মানটিকে বিরোধী মানের সাথে সেট করে আপডেট করতে পারেন!this.state.variable

state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};

Answer 9

আমি রেডাক্স ব্যবহার করে প্রতিক্রিয়া উপাদানটিতে টগল স্টেট ব্যবহার করার জন্য যখন অনুসন্ধান করছিলাম তখন আমি এই পৃষ্ঠায় অবতীর্ণ হয়েছিলাম তবে আমি এখানে একইটি ব্যবহার করে দেখতে পেলাম না।

সুতরাং, আমি মনে করি যে এটি রেডাক্স ব্যবহার করে টগল অবস্থা বাস্তবায়নের জন্য সংগ্রামরত কাউকে সহায়তা করতে পারে।

আমার রিডুসার ফাইলটি এখানে যায়। আমি ডিফল্টরূপে প্রাথমিক অবস্থা মিথ্যা পাই ।

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

আমি চিত্রটিতে ক্লিক করার ক্ষেত্রে রাষ্ট্র পরিবর্তন করি। সুতরাং, আমার img ট্যাগ অনক্লিক ফাংশন সহ এখানে যায়।

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

আমার টগল পপআপ ফাংশনটি নীচে চলেছে, যাকে ডিসপ্যাচার বলে।

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

এই কলটি মানচিত্রের ডিসপ্যাচটপ্রপসের ফাংশনটির নীচে যায় যা টগলড অবস্থায় ফিরে আসে।

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

ধন্যবাদ.