ref={(elem)=>{this.elem = elem}}
elem.addEventListener
class NavigationBlock extends Component {
constructor(props) {
super(props);
this.props=props;
this.handlerClick=this.handlerClick.bind(this);
}
handlerClick(e) {
//обработка клика
}
render() {
let emenets = bigArrayData.map((item)=>{
return <div onClick={this.handlerClick}>item</div>
});
return <div>{elements}</div>
}
}
e.target
.handlerClick(number) {
return (e)=>{
alert(number); //Типа обработка
}
}
render() {
let emenets = bigArrayData.map((item, i)=>{
return <div onClick={this.handlerClick(i)}>item</div>//вместо i любое значение
});
return <div>{elements}</div>
}
handlerClick(type) {
return(e){
let {onClickDiv, onClickSpan} = this.props;
switch(type) {
case "clickDiv":
onClickDiv && onClickDiv(e);
break;
case "clickSpan":
onClickSpan && onClickSpan(e);
break;
}
}
}
render() {
return(
<div onClick={this.handlerClick("clickDiv")}>
<span onClick={this.handlerClick("clickSpan")></span>
</div>
);
}
<MyComponen onClickDiv={что-то} onClickSpan={что-то} /t>
class Div extends Component {
constructor(props) {
super(props);
this.props=props;
}
showAlert(value) {
alert(value);
}
render() {
this.showAlert(1);
return (
<div>
</div>
);
}
}
class Div extends Component {
constructor(props) {
super(props);
this.props=props;
}
showEvent(e) {
alert(e);
}
render() {
this.showAlert(1);
return (
<div>
<button onClick={this.showEvent}></button>
</div>
);
}
}
var self = this
- сохранение в переменную.apply
- вызов метода с явной передачей контекста.bind(some)
- привязка контекста. Говорит функции что использовать в качестве контекста, потом изменить контекст нельзя.()=>{}
- стрелочная функция, которая в отличие от function(){}
- определяет контекст не в момент вызова, а в момент объявления.!true == false //!tue равно false
!0 == true
/*
0 становится конвертируется в логический тип - false, потом возвращается противоположное значение true
*/
function f(str) {
return !!str;
}
f("") // вернет false
f("1") //вернет true
{
oneListOfObjects:[],
twoListOfObjects:[],
threeListOfObjects:[],
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
function mapDispatchToProps(dispatch) {
return {
downloadTickets: ()=>{
dispatch(actions.downloadTickets);
},
setSelectValues: (value)=>{
dispatch(actions.setSelectValues(value));
},
setActvePage: (value)=>{
dispatch(actions.setActvePage(value));
},
};
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
props.downloadTickets
export default connect(
state => ({ updState: state}// Где скобка закрытия???
)
export default connect(state => ({ updState: state})
export default connect(state => ({ updState: state}))