React.js - detect Element, aus der Funktion wurde ohne ref genannt

Question

sagen, wir haben ein Eingabefeld:

<input type="text" ref="inputBrand" onChange={this.updateState} />

Wenn die updateState Funktion aufgerufen wird, ist es eine Möglichkeit, zu wissen, welches Element es genannt wurde von ohne Bezug auf die ref?

updateState: function() { 
    console.log(inputValue???); 
}, 

Der Grund, warum Ich mag würde, dies zu tun, ohne die ref zu Referenzierung ist in dem Fall, dass ich mehrere Eingabefelder haben.

Wenn das obige nicht möglich ist - ist es möglich, die ref direkt im Funktionsaufruf zu übergeben?

Etwas wie folgt aus:

<input type="text" ref="inputBrand" onChange={this.updateState(--this ref--)} />

Answer 1

Sie können den Eingabe-Name & Eingabewert aus dem SyntheticEvent Parameter erhalten, der an alle Event-Handler in React übergeben wird.

updateState: function(e){ 
     this.setState({[e.target.name] : e.target.value},() => console.log(this.state)) 
}, 
render: function() { 
    return <div> 
     <input type="text" name="a" onChange={this.updateState} /> 
     <input type="text" name="b" onChange={this.updateState} /> 
    </div>; 
} 

jsfiddle

Answer 2

updateState: function(e) { 
    console.log(e.target.value); 
}, 

Ereignis Argument e.target wird auf DOM-Element verweisen, wenn Sie es auslösen.

Answer 3

Verwenden der Ereigniskurve und weist ein id jede Komponente anstelle von ref und Zugang ihn über: e.target.id aus der Funktion

var MyComponent = React.createClass({ 
    updateState: function(e){ 
     console.log(e.target.id); 
    }, 
    render: function() { 
    return <div> 
     <input type="text" id="first_input" onChange={this.updateState} /> 
     <input type="text" id="second_input" onChange={this.updateState} /> 
    </div>; 
    } 
}); 

ReactDOM.render(
    <MyComponent name="World" />, 
    document.getElementById('container') 
); 

JSFIDDLE