React.js - обнаруживающий элемент, из которого был вызван функция без реф

Question

Скажет, у нас есть поле ввода:

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

Когда функция updateState называется, есть ли способ узнать, какой элемент он был назван без ссылки на ref?

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

Причина, почему я хотел бы сделать это без ссылки на реф в экземпляре, что у меня будет несколько полей ввода.

Если вышеуказанное невозможно - возможно ли передать ref непосредственно в вызове функции?

Что-то вроде этого:

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

Answer 1

Вы можете получить входное имя & входное значение из параметра SyntheticEvent, который передается всем обработчикам событий в React.

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); 
}, 

аргумент Event e.target будет указывать на DOM-элемент, если вы вызываете его.

Answer 3

Используйте левши событие, и назначить id для каждого компонента вместо исх и доступ к ней через: e.target.id из функции

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