React js'de onchange olayını tetiklemenin en iyi yolu nedir

İstemci tarafı bir uygulama oluşturmak için Backbone + ReactJS paketini kullanıyoruz. Ünlülere büyük ölçüde güvenerek, valueLinkiki yönlü bağlama için ReactJS arayüzünü destekleyen kendi sarmalayıcı aracılığıyla değerleri doğrudan modele yayıyoruz.

Şimdi sorunla karşılaştık:

Biz jquery.mask.jsprogramlı böylece yangın olaylarını tepki vermez girdi değerine biçimlendirir eklentisi. Tüm bunlar, modelin kullanıcı girdisinden biçimlendirilmemiş değerler aldığı ve eklentiden biçimlendirilmiş olanları kaçırdığı duruma yol açar .

Görünüşe göre React, tarayıcıya bağlı olarak birçok olay işleme stratejisine sahip. React'in bunu duyması için belirli bir DOM öğesi için değişiklik olayını tetiklemenin ortak bir yolu var mı?

React 16 ve React> = 15.6 için

Setter .value=istediğimiz gibi çalışmıyor çünkü React kütüphanesi girdi değeri ayarlayıcısını geçersiz kılıyor, ancak işlevi doğrudan inputbağlamda çağırabiliriz .

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'react 16 value');

var ev2 = new Event('input', { bubbles: true});
input.dispatchEvent(ev2);

Textarea elemanı prototypeiçin HTMLTextAreaElementclass kullanmanız gerekir .

Yeni codepen örneği .

Bu katılımcının ve çözümünün tüm kredileri

Yalnızca React <= 15.5 için eski yanıt

İle , olayın geçmesi için olay nesnesinde bayrak react-dom ^15.6.0kullanabilirsiniz.simulated

var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value = 'Something new';
element.dispatchEvent(ev);

Bir örnekle bir codepen yaptım

Neden yeni bayrağın gerekli olduğunu anlamak için bu yorumu çok yararlı buldum :

React'teki giriş mantığı artık tekilleştirmenin değişiklik olaylarını, değer başına birden fazla tetiklememeleri için. Hem tarayıcıdaki onChange / onInput olaylarını hem de DOM düğüm değeri propundaki kümeleri dinler (değeri javascript aracılığıyla güncellediğinizde). Bu, girdinin değerini elle input.value = 'foo' olarak güncellerseniz, {target: input} ile bir ChangeEvent gönderirseniz, React hem seti hem de olayı kaydeder, değerinin hala `` foo '' olduğuna bakın. ', bunu yinelenen bir olay olarak kabul edin ve yutun.

Bu, normal durumlarda iyi çalışır çünkü tarayıcı tarafından başlatılan "gerçek" bir olay element.value üzerindeki kümeleri tetiklemez. Tetiklediğiniz olayı simüle edilmiş bir bayrakla etiketleyerek bu mantıktan gizlice kurtulabilirsiniz ve tepki her zaman olayı tetikler. https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128

En azından metin girişlerinde, onChangegiriş olaylarını dinleyen görünür :

var event = new Event('input', { bubbles: true });
element.dispatchEvent(event);

Bu cevabın biraz geç geldiğini biliyorum ama son zamanlarda benzer bir sorunla karşılaştım. Yuvalanmış bir bileşende bir olay tetiklemek istedim. Radyo ve onay kutusu tipi widget'ları içeren bir listem vardı (bunlar onay kutuları ve / veya radyo düğmeleri gibi davranan div'lerdi) ve uygulamanın başka bir yerinde, birisi bir araç kutusunu kapatırsa, birinin işaretini kaldırmam gerekiyordu.

Oldukça basit bir çözüm buldum, bunun en iyi uygulama olup olmadığından emin değilim ama işe yarıyor.

var event = new MouseEvent('click', {
 'view': window, 
 'bubbles': true, 
 'cancelable': false
});
var node = document.getElementById('nodeMyComponentsEventIsConnectedTo');
node.dispatchEvent(event);

Bu, domNode üzerindeki tıklama olayını tetikledi ve react aracılığıyla bağlanan işleyicim gerçekten çağrıldı, bu nedenle birisi öğeye tıkladığında bekleyeceğim gibi davranıyor. Değişim üzerinde test etmedim ama işe yaramalı ve bunun gerçekten eski IE sürümlerinde nasıl adil olacağından emin değilim, ancak MouseEvent'in en azından IE9 ve üzeri sürümlerde desteklendiğine inanıyorum.

Sonunda özel kullanım durumum için bundan uzaklaştım çünkü bileşenim çok küçüktü (uygulamamın yalnızca bir kısmı hala öğrenmeye başladığım için tepki veriyordu) ve aynı şeyi dom düğümlerine referans almadan başka bir yolla elde edebildim.

GÜNCELLEME:

Diğerlerinin yorumlarda belirttiği gibi, this.refs.refnamebir dom düğümüne referans almak için kullanmak daha iyidir . Bu durumda refname, bileşeninize aracılığıyla eklediğiniz referansdır <MyComponent ref='refname' />.

ReactTestUtils kullanarak olayları simüle edebilirsiniz, ancak bu, birim testi için tasarlanmıştır.

Bu durumda valueLink'i kullanmamanızı ve eklenti tarafından tetiklenen olayları değiştirmeyi dinlemenizi ve yanıt olarak girdinin durumunu güncellemeyi öneririm. İki yönlü bağlama, her şeyden çok bir demo işlevi görür; Yalnızca saf iki yönlü bağlamanın çoğu uygulama için uygun olmadığını ve uygulamanızdaki etkileşimleri tanımlamak için genellikle daha fazla uygulama mantığına ihtiyaç duyduğunuzu vurgulamak için eklentilere dahil edilirler.

Grin / Dan Abramov'un cevabını genişleterek, bu, birden çok giriş türünde çalışır. React> = 15.5'te test edildi

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};

Rastgele öğeler üzerinde değişiklik olaylarının tetiklenmesi, akıl yürütmesi zor olan bileşenler arasında bağımlılıklar yaratır. React'in tek yönlü veri akışına bağlı kalmak daha iyidir.

React'in değişiklik olayını tetikleyecek basit bir pasaj yoktur. Mantık, ChangeEventPlugin.js'de uygulanır ve farklı girdi türleri ve tarayıcılar için farklı kod dalları vardır. Dahası, uygulama ayrıntıları React'in sürümlerine göre değişir.

Ben yerleşik -tetik-değişim tepki şeyi yapar, ama değildi bir üretim bağımlılık olarak, test için kullanılacak amaçlanmıştır:

let node;
ReactDOM.render(
  <input
    onChange={() => console.log('changed')}
    ref={(input) => { node = input; }}
  />,
  mountNode
);

reactTriggerChange(node); // 'changed' is logged

CodePen

bir onchange olayını işlemek için işlevleri kullandığımızdan, bunu şu şekilde yapabiliriz:

class Form extends Component {
 constructor(props) {
  super(props);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
  this.state = { password: '' }
 }

 aForceChange() {
  // something happened and a passwordChange
  // needs to be triggered!!

  // simple, just call the onChange handler
  this.handlePasswordChange('my password');
 }

 handlePasswordChange(value) {
 // do something
 }

 render() {
  return (
   <input type="text" value={this.state.password} onChange={changeEvent => this.handlePasswordChange(changeEvent.target.value)} />
  );
 }
}

Bunu React'in Github sorunlarında buldum: Bir cazibe gibi çalışıyor (v15.6.2)

Bir Metin girişine şu şekilde uyguladım:

changeInputValue = newValue => {

    const e = new Event('input', { bubbles: true })
    const input = document.querySelector('input[name=' + this.props.name + ']')
    console.log('input', input)
    this.setNativeValue(input, newValue)
    input.dispatchEvent(e)
  }

  setNativeValue (element, value) {
    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set
    const prototype = Object.getPrototypeOf(element)
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(
      prototype,
      'value'
    ).set

    if (valueSetter && valueSetter !== prototypeValueSetter) {
      prototypeValueSetter.call(element, value)
    } else {
      valueSetter.call(element, value)
    }
  }

İçin HTMLSelectElement, yani<select>

var element = document.getElementById("element-id");
var trigger = Object.getOwnPropertyDescriptor(
  window.HTMLSelectElement.prototype,
  "value"
).set;
trigger.call(element, 4); // 4 is the select option's value we want to set
var event = new Event("change", { bubbles: true });
element.dispatchEvent(event);

Olay türü inputbenim için işe yaramadı <select>ama değiştirmeyi changeişler

useEffect(() => {
    var event = new Event('change', { bubbles: true });
    selectRef.current.dispatchEvent(event); // ref to the select control
}, [props.items]);

Backbone ve React kullanıyorsanız, aşağıdakilerden birini tavsiye ederim,

• Omurga React.Component
• react.backbone

Her ikisi de Backbone modellerini ve koleksiyonlarını React görünümleriyle entegre etmeye yardımcı olur. Backbone olaylarını Backbone görünümlerinde yaptığınız gibi kullanabilirsiniz. Her iki müzikleri ettik ve biri mixin ve diğer değişiklikler olması dışında pek bir fark görmedim React.createClassiçin React.createBackboneClass.