[英]onClick and className not working in reactjs
Onclick does not work in this component. Onclick 在此组件中不起作用。 This is the first time I have ever encountered this error, I have tried going through the code, I have bound all functions to
this
and yet onClick
method is not working at all.这是我第一次遇到这个错误,我尝试过代码,我已经将所有函数绑定到
this
,但onClick
方法根本不起作用。 Any className that I add to the div
inside the Col
is not being applied too.我添加到
Col
内的div
任何 className 也没有被应用。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Row, Col } from 'antd';
import { safariTypes } from '../../data/safariTypes';
import uuid from 'uuid/v1';
import '../../App.css';
const ThePeople = './Media/thePeople.jpeg';
const BoraBora = './Media/bora.jpg';
const Aerial = './Media/balloon.jpg';
const Family = './Media/family_small.jpg';
const Honeymoons = './Media/honeymoon_small.jpg';
const Wildlife = './Media/wildlife.jpg';
class Highlights extends Component {
constructor(props) {
super(props);
this.state = {
}
this.returnSafariItemsHighlights = this.returnSafariItemsHighlights.bind(this)
this.show = this.show.bind(this)
}
show = () => {
console.log("hey");
}
returnSafariItemsHighlights(){
var Feature = null
var arr = []
if(safariTypes){
safariTypes.slice(0,6).map((item, key) => {
if(item === 'Aerial e.g Hot air ballons'){
Feature = Aerial
} else if(item === 'Wildlife') {
Feature = Wildlife
} else if(item === 'Family and Holiday') {
Feature = Family
} else if(item === 'Beach Holidays') {
Feature = BoraBora
} else if(item === 'Culture and History') {
Feature = ThePeople
} else if(item === 'Honeymoons'){
Feature = Honeymoons
}
arr.push(
<Col xs={24} sm={12} md={12} lg={8} xl={8} key={uuid()} onClick={this.show} >
<div
className="bounceAnimation"
style={{ backgroundImage: 'url(' + Feature + ')',
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
height: '40vh',
paddingTop: '28vh',
paddingLeft: '20px',
paddingRight: '20px'
}}>
<div style={{backgroundColor: "rgb(255, 255, 255, 0.4)", textAlign: "center", fontSize: "25px",padding: "5px", fontFamily: "Lobster", color: "green"}}>
#{item}
</div>
</div>
</Col>
)
})
}
return arr
}
render() {
return (
<div>{this.returnSafariItemsHighlights()}</div>
);
}
}
it seems Col does not accept onClick prop, why don't you move onClick={this.show}
to the div inside Col as follows似乎 Col 不接受 onClick
onClick={this.show}
,为什么不将onClick={this.show}
移动到 Col 内的 div 如下
<Col
xs={24} sm={12} md={12} lg={8} xl={8} key={uuid()} >
<div
onClick={this.show}
className="bounceAnimation"
style={{ backgroundImage: 'url(' + Feature + ')', ...}}
>
...
</div>
</Col>
I think I found a performance issue, every time the component renders it will call returnSafariItemsHighlights
, there you populate an array of components with a key prop which is generated every time you call the function, when react reconciles it will find different keys in that case child components will not be reused.我想我发现了一个性能问题,每次组件渲染时它都会调用
returnSafariItemsHighlights
,在那里你用每次调用函数时生成的 key prop 填充一个组件数组,当 react 协调时,它会在这种情况下找到不同的键子组件不会被重用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.