চেঞ্জবক্স অন চেঞ্জ না করে প্রতিক্রিয়া জানায়

Question

TLDR: ব্যবহার defaultChecked পরিবর্তে টিক চিহ্ন দেন, কাজ jsbin ।

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

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log('handleChange', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

ব্যবহার:

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

সমাধান:

চেক করা ব্যবহারের ফলে অন্তর্নিহিত মানটি পরিবর্তন করতে দেওয়া হয় না (আপাতদৃষ্টিতে) এবং এইভাবে অন চেঞ্জ হ্যান্ডলারকে কল করে না। ডিফল্টচেকডে স্যুইচ করা এটিকে ঠিক করতে পারে বলে মনে হচ্ছে:

var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    this.setState({
      complete: !this.state.complete
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            defaultChecked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

Comments

প্রথমে, কেন এমন কোনও অন চেঞ্জ যুক্ত করবেন না যা this.setState({checked: !this.state.checked})মান সঞ্চয় করার চেয়ে সহজ করে তোলে । তারপরে চেক করা অ্যাট্রিবিউটে একটি টেরিনারি অপারেটর:checked={this.state.checked ? 'checked': null}

— 28:34

এটি এভাবেই শুরু হয়েছিল তবে এটি কখনও আপডেট হবে বলে মনে হয়নি। তাই আমি এখানে এবং সেখানে গুলি চালানো শুরু করলাম যা বের করা হচ্ছে না তা ডিবাগ করার জন্য। সম্পূর্ণ হলে আদর্শ ফর্মটিতে ফিরে আসবে :)

— জার্লিংডিং করুন

আপনার মাউন্টডোডটি আসল ডোম নোড ধরে নিলে, আপনাকে ব্যবহার করতে হবে this.refs.complete.getDOMNode().checked। fiddle jsfiddle.net/d10xyqu1 দেখুন

— ট্রেকফ্রোভার

তিনি কেবল ডোম নোড পাওয়ার পরিবর্তে রাষ্ট্র ব্যবহার করতে পারেন যদিও: jsfiddle.net/d10xyqu1/1 এটি দুর্দান্ত কাজ করে, আপনার অবশ্যই কিছু ভুল টাইপ করা উচিত।

— জ্যাকিফাই করুন

টিএলডিআর মন্তব্য উপেক্ষা করুন - ডিফল্ট চেক করা সবসময় উত্তর হয় না

— ক্রিস

Answer 1

আপনার চেকবক্সের পরীক্ষিত রাষ্ট্রটি পেতে পাথটি হ'ল:

this.refs.complete.state.checked

বিকল্পটি হ'ল handleChangeপদ্ধতিতে পাস হওয়া ইভেন্টটি থেকে তা পাওয়ার জন্য :

event.target.checked

Comments

হ্যান্ডেল চেঞ্জ কখনই কল করা হবে না, আপনি চেকবক্স বা লেবেলে ক্লিক করলে কিছু যায় আসে না, হ্যান্ডেল চেঞ্জ কল হয় না :(।

— 38

আপনার ইনপুটটিতে "পরীক্ষিত" পরিবর্তে ডিফল্টচেকড = {this.state.complete plete ব্যবহার করার চেষ্টা করুন।

— zbyte

এটাই ছিল ... চিরদিনের জন্য অনুসন্ধান করা এবং আশপাশে ঝাঁকুনি দেওয়া। অন্যরাও যদি এগুলি চালিয়ে যায় তবে সম্পূর্ণ কাজের উত্তরের সাথে প্রশ্ন আপডেট করবে।

— 28:45

তবে কেন - একই সমস্যা থাকলেও আপনি checkedনিয়ন্ত্রিত উপাদানগুলির জন্য ব্যবহার করার কথা : /

— ডমিনিক

সেটিং এর checkedঅর্থ হল রাষ্ট্রটি উপাদানটির বাইরে পরিচালিত। যখন ব্যবহারকারী ক্লিক করেন তখন handleChangeকোনও রাজ্য আপডেট না হওয়ায় কল করার কিছুই নেই। পরিবর্তে আপনাকে শুনতে onClickএবং সেখানে একটি রাষ্ট্রীয় আপডেট ট্রিগার করতে হবে।

— zbyte

Answer 2

এই জাতীয় ক্ষেত্রে রেফ ব্যবহার না করা ভাল। ব্যবহার করুন:

<input
    type="checkbox"
    checked={this.state.active}
    onClick={this.handleClick}
/>

কিছু বিকল্প আছে:

checked বনাম defaultChecked

প্রাক্তন রাষ্ট্র পরিবর্তন এবং ক্লিক উভয় প্রতিক্রিয়া জানাতে হবে । পরবর্তীকালে রাষ্ট্রের পরিবর্তনগুলি উপেক্ষা করা হবে।

onClick বনাম onChange

প্রাক্তন সর্বদা ক্লিকগুলিতে ট্রিগার করতেন। উপাদানটিতে checkedঅ্যাট্রিবিউট উপস্থিত থাকলে আধুনিকগুলি ক্লিকগুলিতে ট্রিগার করবে না input।

Answer 3

দৃশ্যে আপনি ইনপুট ডিওমে অন চেঞ্জ হ্যান্ডলারটি ব্যবহার করতে পছন্দ করবেন না, আপনি onClickবিকল্প হিসাবে সম্পত্তিটি ব্যবহার করতে পারেন । defaultCheckedশর্তে v16 IINM জন্য একটি নির্দিষ্ট রাষ্ট্র ছেড়ে দিতে পারেন।

 class CrossOutCheckbox extends Component {
      constructor(init){
          super(init);
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange({target}){
          if (target.checked){
             target.removeAttribute('checked');
             target.parentNode.style.textDecoration = "";
          } else {
             target.setAttribute('checked', true);
             target.parentNode.style.textDecoration = "line-through";
          }
      }
      render(){
         return (
            <span>
              <label style={{textDecoration: this.props.complete?"line-through":""}}>
                 <input type="checkbox"
                        onClick={this.handleChange}
                        defaultChecked={this.props.complete}
                  />
              </label>
                {this.props.text}
            </span>
        )
    }
 }

আমি আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করবে।

Answer 4

আপনার যদি এমন কোনও handleChangeফাংশন থাকে যা দেখে মনে হয়:

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value,
  });
}

আপনি একটি কাস্টম onChangeফাংশন তৈরি করতে পারেন যাতে এটি কোনও পাঠ্য ইনপুটটির মতো কাজ করে:

<input
  type="checkbox"
  name="check"
  checked={this.state.check}
  onChange={(e) => {
    this.handleChange({
      target: {
        name: e.target.name,
        value: e.target.checked,
      },
    });
  }}
/>

Comments

handleChangeথাকা inputউচিত নয় this.handleChange?

— আর্দি

Answer 5

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

    this.handleInputChange = (e) => {
        item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    }

Answer 6

অন ​​চেঞ্জ ডিফল্টচেকড ব্যবহার করার সময় মোবাইলে হ্যান্ডেল চেঞ্জ কল করবে না। বিকল্প হিসাবে আপনি অনক্লিক এবং অন টুচেন্ড ব্যবহার করতে পারেন।

<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;

Answer 7

উপাদান ui মধ্যে, চেকবাক্সের অবস্থা হিসাবে আনতে পারে

this.refs.complete.state.switched