Эквивалент this.id в React.js
В веб-форме html я бы использовал такую функцию JavaScript:
<select id = "test" onChange = "getId(this.id)"> </select>
<script>
function getId(id){
document.getElementById(id);
}
</script>
Какой будет версия react.js чего-то подобного? Я пытался сделать:
constructor(){
super();
this.HandleAddListener = this.HandleAddListener.bind(this.id);
}
и вариант выбора:
<select id = "test" onClick{this.HandleAddListener.bind}> </select>
так как бы я попытался получить this.id?
Обычно в React попытка прямого доступа к узлу DOM — это запах кода. Это звучит как проблема XY. Какую настоящую проблему вы пытаетесь решить?
@Jordan Running ? Спасибо за ссылку XY problem ? Никогда не знал, что такой термин существует ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать событие, которое получают обработчики событий:
class {
HandleAddListener(event) {
console.info(event.target.id);
}
Я бы посоветовал изучить функции стрелок () => {}, они свяжут область видимости для вас.
читать далее:
Вы должны использовать this.refs. См. документы о. Пример документа:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref = {this.myRef} />;
}
}
первый пост на StackOverflow, мне нужно научиться использовать это, хахахаха.
Пожалуйста, рассмотрите возможность включения небольшого объяснения того, что вы связали со своим ответом.
Как и в документации по реакции, ссылки используются для получения ссылки на узел DOM или компонент в React. Refs вернул бы узел, на который мы ссылаемся, не так ли?
Вы можете использовать
refs, но обычно это последнее средство в React. Могу я спросить, чего вы пытаетесь достичь? Возможно, есть декларативный (React) способ сделать то же самое.