Почему не работает атрибут ref?

Question

[sinevik]

Почему не работает атрибут ref. Хочу двигать этот блок по экрану, не не срабатывает ref

import React from "react";



class Main extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			divStyle: {
				width:"1000px",
				height: "500px",
				outline: "1px solid red"
			},
			move: {
				width:"200px",
				height:"100px",
				outline: "1px solid green"

			}
		}

	}


		MouseDown(e){
                console.log(this.ourDiv);
		}

	

	render() {

		return(	
			<div>
				<div style={this.state.divStyle}>
					<div style={this.state.move}  onClick ={this.MouseDown} ref={(ourDiv)=> this.ourDiv = ourDiv}></div>
				</div>
			</div>
			)

	}
}



export default Main;

Answer 1

[Антон Спирин]

У вас хандлер неправильный.
Во-первых переименуйте с Mousedown в handleClick.
В JavaSсript не принято называть методы с большой буквы, а хандлеры принято называть в формате handleSomeEvent или someEventHandler.

Во-вторых либо используйте class field function:

handleClick => e {
  console.log(this.ourDiv);
};

либо оберните хандлер в анонимную функцию при передаче в onClick:

<div
  style={this.state.move}
  onClick ={() => this.handleClick()}
  ref={ourDiv => this.ourDiv = ourDiv}
></div>

Проблема в том, что метод класса при передаче в другое место теряет контекст и this больше не указывает на ваш объект.

Comments

[sinevik]

да я понял, забыл bind сделать. Елки палки, какая та одна мелкая строчка, и сидишь как идиот пол часа

Answer 2

[Александр]

При вызове MouseDown this будет равен undefined. Подробнее можно почитать здесь.

Чтобы такого не произошно, можно исользовать стрелочные функции (лучший вариант):

onClick = (e) => {
     console.log(this.ourDiv);
}

Либо в конструкторе написать:

constructor(props){
    super(props);
    //...
    this.onClick = this.onClick.bind(this);
}

Самый худший вариант - обернуть функцию в стрелочную, ведь она будет создаваться на каждый вызов render:

<div onClick={() => this.onClick()}/>