React: क्लिक हैंडलर में event.preventDefault onChange को कॉल करने से नहीं रोकता है

change घटना द्वारा बनाई जा रही है ChangeEventPlugin के लिए एक प्रतिक्रिया के रूप में topChange , पहले अपने onClick हैंडलर भी कहा जाता है (तो इससे पहले कि preventDefault कॉल), यहां: https://github.com/facebook/react/blob/master/src/renderers/dom/sared/eventPlugins/ChangeEventPlugin.js#LIN8

यह प्लगइन यह पता लगाने की कोशिश कर रहा है कि क्या चेकबॉक्स का मूल्य बदल जाएगा, और यदि हाँ, तो यह change ईवेंट की कतार बना देगा। यह निर्णय लेने के लिए अगले मूल्य के साथ पिछले मूल्य की तुलना करने के लिए inputValueTracking कार्यक्षमता का उपयोग करता है, यहां: https://github.com/facebook/react/blob/master/src/renderers/dom/sared/ inputValueTracking.js # L154

nextValue इस तरह सीधे DOM से लिया जाता है: value = isCheckable(node) ? '' + node.checked : node.value; https://github.com/facebook/react/blob/master/src/renderers/dom/sared/inputVunueTracking.js# L56

समस्या यह है कि node.checked मूल्य इस बिंदु पर अस्थायी रूप से सही है, इसलिए पहले क्लिक के बाद यह है:

lastValue == false (सही)
nextValue == true (गलत)

और चेकबॉक्स पर अगले क्लिक पर, change घटना को अब निकाल नहीं दिया जा सकता है, क्योंकि मूल्य इस प्रकार हैं:

lastValue == true (गलत)
nextValue == true (गलत)

कुल मिलाकर समस्या यह प्रतीत होती है कि रिएक्ट DOM से पूछ रहा है कि नोड का checked मूल्य क्या है, इससे पहले कि onClick में preventDefault कहा जा सके।

इस में खुदाई के साथ आपकी मदद के लिए @karelskopek और @Mintaffee को धन्यवाद।

@aweary क्या आपको लगता है कि यह हल करने लायक है?

इस एक के साथ कोई प्रगति नहीं? मैं रिएक्ट v16.2 का उपयोग कर रहा हूं और व्यवहार एक ही है - ऑनक्रेन्ग को पहली बार चालू किया गया है और बाद के क्लिक्स इसे ट्रिगर नहीं करते हैं। मैं यहां काफी उच्च प्राथमिकता वाला मुद्दा कहूंगा।

क्या यह संबंधित है? preventDefault को एक चेकबॉक्स में कहा जाता है onChange कारण बनता है और सिंक से बाहर जाने के लिए ब्राउज़र स्थिति: https://codesandbox.io/s/0qpr936xkv

अभी भी एक मुद्दा रिएक्ट 16.8.6 में। एक संभव समाधान onClick हैंडलर में सब कुछ करना है:

const radios = ['one', 'two', 'three'];

class Row extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  render() {
    const { value } = this.props;
    return (
      <div className="row">
        <div className="radio-group">
          {radios.map(radio => (
            <label key={radio} className="radio">
              <input
                type="radio"
                name="radio"
                value={radio}
                checked={radio === value}
                onClick={this.onClick}
                onChange={this.onChange}
              /><span>Radio</span>
            </label>
          ))}
        </div>
      </div>
    );
  }

  onClick(event) {
    // Check something to prevent radio change
    if (...) {
      event.preventDefault();
      return;
    }
    // Sync value in the store
    this.props.setValue(event.target.value);
  }
  onChange() {
    // We need this empty handler to suppress React warning:
    // "You provided a `checked` prop to a form field without an `onChange` handler.
    // This will render a read-only field. If the field should be mutable use `defaultChecked`.
    // Otherwise, set either `onChange` or `readOnly`"
  }
}

यदि आप नियंत्रित घटक का उपयोग करते हैं, तो मुझे एक और विकल्प मिला है, जो कि राज्य में बस मूल्य को अपरिवर्तित छोड़ना है:

onChange(event) {
  // Check something to prevent radio change
  if (...) {
    return;
  }
  // Sync value in the store
  this.props.setDateTime(event.target.value);
}

एक सरल समाधान के लिए, आप onMouseDown घटना पर e.preventDefault कर सकते हैं ताकि onChange को गोलीबारी से बचाया जा सके।

onMouseDown(e) { if (...) { e.preventDefault(); return; } }