Как получить доступ к реквизитам внутри компонента?

Question

Возможно ли получить доступ к myVar значениям в пределах handleClick? Все еще изо всех сил стараюсь понять основы :-). Пробовал пропустить его в пределах {myVar}, но все тот же.

var Button = React.createClass({ 
    getInitialState(){ 
     return {counter: 1} 
    }, 
    handleClick(){ 
     console.log(this.props.myVar); //getting undefined here 
    }, 
    render(){ 
     return(
      <button onClick={this.handleClick} myVar="blah">{this.state.counter}</button> 
     ); 
    } 
}); 

Answer 1

Свойство связанно с самим компонентом, поэтому this.props всегда будет указывать на свойства добавленных через родитель, а не каждую часть разметки, как угловые директивы. Для того, чтобы связать переменную в OnClick, вы можете сделать это следующим образом:

<button onClick={() => this.handleClick("blah")}>{this.state.counter}</button> 

Then youre handleclick will fetch it as its first parameter. 

Конечно, Вы можете создать свою собственную кнопку-компонент, а затем передать в реквизита, как вы делаете. Затем кнопка-компонент будет содержать this.props.myVar

Answer 2

Вы можете связать переменную и доступа в качестве параметра в функции handleClick:

var Button = React.createClass({ 
    getInitialState(){ 
    return {counter: 1} 
}, 
handleClick(myVar){ 
    console.log(myVar) //consoles blabh; 
}, 
render(){ 
    let myVar="blabh"; 
    return(
     <button onClick={this.handleClick.bind(myVar)} >{this.state.counter} </button> 
     ); 
    } 
}); 

Answer 3

Дело в том, что события не связаны с вашим компонентом по умолчанию , поэтому исправить это просто привязать обработчик к этому.

<button onClick={this.handleClick.bind(this)} myVar="blah">{this.state.counter}</button> 

Answer 4

Реквизит доступен везде на компоненте, который означает, что нет никакой необходимости для вас, чтобы передать его в качестве опоры к button тегу. Только правильно связанная функция позаботится об этом для вас, и с тех пор, как вы используете .createClass(), ваши функции автоматически привязаны к экземпляру вашего компонента, что означает, что функция handleClick уже имеет доступ как к , так и к this.state.

handleClick: function (event) { 
    console.log(this.props.myVar); //blah 
} 

Но если вы хотите передать дополнительную переменную в вашей функции handleClick вам нужно передать новую функцию обработчика OnClick. Не забудьте связать this поэтому у вас есть доступ к экземпляру, а

handleClick: function (event, myVar) { 
    console.log(myVar); 
} 

<button onClick={this.handleClick.bind(this, myVar)} />