रिएक्ट चेकबॉक्स ऑनकॉन्ग नहीं भेज रहा है

Question

TLDR: चेक किए गए, jsbin के बजाय defaultChecked का उपयोग करें ।

एक साधारण चेकबॉक्स को सेटअप करने की कोशिश कर रहा है जो जाँचने पर इसके लेबल टेक्स्ट को पार कर जाएगा। किसी कारण से जब मैं घटक का उपयोग कर रहा हूं तो हैंडल चेंज नहीं हो रहा है। क्या कोई समझा सकता है कि मैं क्या गलत कर रहा हूं?

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

सबसे पहले, क्यों नहीं एक onChange कि सिर्फ this.setState({checked: !this.state.checked})आसान करने के लिए एक मूल्य की दुकान की तुलना में जोड़ता है । फिर चेक किए गए एट्रुब्यूट में एक टर्नरी ऑपरेटर:checked={this.state.checked ? 'checked': null}

— zackify करें

यह कैसे शुरू हुआ, लेकिन यह कभी भी अपडेट नहीं हुआ। इसलिए मैंने इसे शुरू करने के लिए इधर-उधर फैंकना शुरू कर दिया। आदर्श रूप से पूर्ण रूप से सरलतम रूप में वापस जाएगा :)

— jdarling

अपना माउंटनोड मान लेना एक वास्तविक डोम नोड है, आपको इसका उपयोग करना होगा this.refs.complete.getDOMNode().checked। fiddle jsfiddle.net/d10xyqu1

— trekforever

वह केवल डोम नोड प्राप्त करने के बजाय राज्य का उपयोग कर सकता है: jsfiddle.net/d10xyqu1/1 यह ठीक काम करता है, आपके पास कुछ गलत होना चाहिए।

— zackify

TLDR टिप्पणी पर ध्यान न दें - डिफ़ॉल्ट रूप से हमेशा जवाब नहीं दिया जाता है

— क्रिस

Answer 1

अपने चेकबॉक्स की जाँच की गई स्थिति प्राप्त करने के लिए रास्ता होगा:

this.refs.complete.state.checked

विकल्प को handleChangeविधि में पारित घटना से प्राप्त करना है :

event.target.checked

Comments

handleChange, कभी नहीं कहा जाता है हो रही है अगर आप चेकबॉक्स या लेबल पर क्लिक करें कोई फर्क नहीं पड़ता, handleChange बुलाया नहीं प्राप्त करता है :(।

— jdarling

अपने इनपुट पर "चेक किए गए" के बजाय defaultChecked = {this.state.complete} का उपयोग करने का प्रयास करें।

— zbyte

वह यह था ... हमेशा के लिए खोज और चारों ओर poking। इस मामले में अन्य लोगों द्वारा भी पूरी तरह से काम करने के जवाब के साथ सवाल को अद्यतन करेगा।

— jdarling

लेकिन क्यों - एक ही समस्या है, लेकिन आप checkedनियंत्रित घटकों के लिए उपयोग करने वाले हैं: /

— डोमिनिक

सेटिंग का checkedमतलब है कि राज्य घटक के बाहर प्रबंधित है। जब उपयोगकर्ता क्लिक करता है तो कॉल करने के लिए कुछ भी नहीं है handleChangeक्योंकि कोई भी राज्य अपडेट नहीं किया जाता है। इसके बजाय आपको onClickवहां एक राज्य अपडेट को सुनने और ट्रिगर करने की आवश्यकता होगी ।

— झब्ते

Answer 2

ऐसे मामलों में रेफ्स का उपयोग न करना बेहतर है। उपयोग:

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

कुछ विकल्प हैं:

checked बनाम defaultChecked

पूर्व स्थिति और परिवर्तन दोनों पर प्रतिक्रिया देगा । उत्तरार्द्ध राज्य परिवर्तनों की अनदेखी करेगा।

onClick बनाम onChange

पूर्व हमेशा क्लिक पर ट्रिगर होगा। यदि तत्व तत्व checkedपर मौजूद है तो बाद वाले क्लिक पर ट्रिगर नहीं करेंगे input।

Answer 3

इस परिदृश्य में आप इनपुट DOM पर onChange हैंडलर का उपयोग नहीं करना चाहेंगे, आप 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

डिफॉल्ट चेकडैक का उपयोग करने पर onChange मोबाइल पर हैंडचेंज को कॉल नहीं करेगा। एक विकल्प के रूप में आप onClick और onTouchEnd का उपयोग कर सकते हैं।

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

Answer 7

सामग्री यूआई में, चेकबॉक्स की स्थिति को प्राप्त किया जा सकता है

this.refs.complete.state.switched