Holen Sie sich Requisiten aus Kind Form Komponente, ReactJS

Question

Ich bin neu zu React.

Ich schreibe eine Komponente ArrayInput, die mehrere (basierend auf Status) Eingabefeld enthält.

Und ArrayInput müssen jedes OnChange-Ereignis der Eingabebox behandeln.

Ich hoffe, dass einige spezifische Requisiten/Attribut (in diesem Fall „Index“) zu erhalten, auf diese dramatisch erzeugten Eingabefeld

ich viele Beiträge und Dokumente suchen, kann aber nicht den richtigen Weg finden.

Ich weiß, ich this.ref[inputBoxRef] verwenden kann (reagieren 14+), um den tatsächlichen DOM-Knoten zu erhalten, finde es aber kein „Attribut“ oder „data“ hat, wenn $(domnode).attr('index') oder $(domnode).data('index') verwenden.

window.ArrayInput = React.createClass({ 

      ......other methods 

      handleChange:function(ref,event){ 
       var domInputBox = this.refs[ref]; 
       //trying to get the index attribute of this input 
      } 

      render:function(){ 
       var self = this; 
       return (
        <div className="input-wrapper" >        
         <label> 
          <div>{this.props.label}</div> 

          { 
           this.state.value.map(function(e,i){ 
            return (       
             <input type="text" 
              ref={"arrayBox"+i} 
              key={"arrayBox"+i} 
              index={i} //custom attribute 
              value={e} 
              onChange={self.handleChange.bind(self,"arrayBox"+i)} 
             /> 
            ) 
           }) 
          } 

         </label> 
        </div> 
       ) 
      } 
    }); 

Answer 1

Sie können immer event.target verwenden. versuchen Sie event.target.index.

Answer 2

Ihre <input> (mit Kleinbuchstaben) ist eine Standard-HTML-Komponente.

Wahrscheinlich am besten zu versuchen und zu vermeiden, benutzerdefinierte Attribute auf diese Komponenten in Reaktion setzen.
Weil Sie Ihr DOM dann unnötigerweise mit Daten beschmutzen, die innerhalb von react selbst übergeben werden könnten und sollten. Und es ist eine lange Reise von Reagieren zu DOM, um zu versuchen, das DOM erneut zu lesen, um die Daten zu erhalten.

Wenn Sie die index Variable innerhalb handleChange wissen, binden sie an den Aufruf-Handler, wie:

onChange={self.handleChange.bind(self,i)} 

und wenn Sie Sie Handler Definition zu ändern:

handleChange:function(element,i){ 
    console.log(element.value); // outputs value of element that changed 
    console.log(i);    // outputs the index of the element that changed 

Um Der Zugriff auf den Wert des Elements (oder eines anderen DOM-Attributs) sowie auf den Index.