我还在学习React。我想做的是做一个卡时,点击显示随机图像从“const images”当我调用处理点击从“const DefaultCardContents 1”背面/图像我得到错误handleClick是没有定义。任何帮助是赞赏谢谢。
src\example\App.js
Line 96:18: 'handleClick' is not defined no-undef
Code is here...
import React, { Component } from 'react';
import Flippy, { FrontSide, BackSide } from './../lib';
import Rick from './rick.png';
import AmmoCard from './AmmoCard.png';
import BackpackCard from './BackpackCard.png';
import './App.css';
import { useState } from "react";
const images = [
"https://via.placeholder.com/150/0000FF/808080",
"https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/00FF00/000000"
];
function RandomImage() {
const [currentImage, setCurrentImage] = useState(images[0]);
const handleClick = () => {
const randomIndex = Math.floor(Math.random() * images.length);
setCurrentImage(images[randomIndex]);
};
};
const FlippyStyle = {
width: '200px',
height: '300px',
textAlign: 'center',
color: '#FFF',
fontFamily: 'sans-serif',
fontSize: '30px',
justifyContent: 'center',
paddingRight: '150px' ,
paddingLeft: '150px'
}
const DefaultCardContents1 = ({ children }) => (
<React.Fragment>
<FrontSide
style={{
backgroundColor: '0',
display: 'flex',
alignItems: 'center',
flexDirection: 'column'
}}
>
<img
src={Rick}
style={{ maxWidth: '130%', maxHeight: '100%' }}
/>
<span
style={{
fontSize:'12px',
position: 'absolute',
bottom: '10px',
width: '100%'
}}>
{children}<br />
</span>
</FrontSide>
<BackSide
style={{
backgroundColor: '',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
}}>
<img
src={RandomImage}
style={{ maxWidth: '130%', maxHeight: '100%' }}
onClick={handleClick}
/>
<span
style={{
fontSize:'12px',
position: 'absolute',
bottom: '10px',
width: '100%'
}}>
{children}<br />
</span>
</BackSide>
</React.Fragment>);
const DefaultCardContents2 = ({ children }) => (
<React.Fragment>
<FrontSide
style={{
backgroundColor: '0',
display: 'flex',
alignItems: 'center',
flexDirection: 'column'
}}
>
<img
src={Rick}
style={{ maxWidth: '130%', maxHeight: '100%' }}
/>
<span
style={{
fontSize:'12px',
position: 'absolute',
bottom: '10px',
width: '100%'
}}>
{children}<br />
</span>
</FrontSide>
<BackSide
style={{
backgroundColor: '',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
}}>
<img
src={BackpackCard}
style={{ maxWidth: '130%', maxHeight: '100%'}}
/>
<span
style={{
fontSize:'12px',
position: 'absolute',
bottom: '10px',
width: '100%'
}}>
{children}<br />
</span>
</BackSide>
</React.Fragment>);
const FlippyOnClick1 = ({ flipDirection = 'vertical' }) => (
<Flippy
flipOnClick={true}
flipDirection={flipDirection}
style={FlippyStyle}
>
<DefaultCardContents1>
</DefaultCardContents1>
</Flippy>
);
const FlippyOnClick2 = ({ flipDirection = 'vertical' }) => (
<Flippy
flipOnClick={true}
flipDirection={flipDirection}
style={FlippyStyle}
>
<DefaultCardContents2>
</DefaultCardContents2>
</Flippy>
);
class App extends Component {
constructor(props) {
super(props);
this.state = {
isFlipped: false
};
setInterval(() => {
this.setState({
isFlipped: !this.state.isFlipped
});
}, 3000);
}
render() {
return (
<div className="App">
<div style={{ display: 'flex', flex: '1 0 200px', justifyContent: 'center', 'flex-wrap': 'wrap' }}>
<FlippyOnClick1 />
<FlippyOnClick2 />
</div>
</div>
);
}
}
export default App;
我期待着有一个随机的图像显示时,卡点击。
3条答案
按热度按时间tyg4sfes1#
你在错误的地方定义了const handleClick。它需要在const DefaultCardContents1中。你在这个.state函数旁边使用了hook,这是非常糟糕的做法。
rjzwgtxy2#
handleClick未定义,因为它既不在您尝试调用它的“DefaultCardContents1”组件中,也没有作为props传递。您可以尝试将其定义为“DefaultCardContents1”组件。不太确定使用RandomImage fn的目的,因为它没有任何返回表达式
k10s72fa3#
你的handleClick需要在DefaultCardContents1函数中定义。另外,最好的做法是将图像 Package 在一个按钮中,并使用该按钮来处理单击,而不是直接在图像上定义它。