所以,首先,我想做的是:我有一些包含一些文本和图像的 div。 div 的所有数据都存储在状态数组中。您还可以添加 div 并删除您想要的任何 div。我现在想实现的是,当用户单击图像时更改图片。有一个预设的图像库,每当用户单击该图像时,就会显示下一张图像。
这是一些相关代码:
let clicks = 0;
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
data : [
createData( someimage, "Image 1"),
createData( anotherimage, "Image 2"),
createData( thirdimage, "Image 3"),
createData( fourthimage, "Image 4"),
],
imgs : [imgsrc1,imgsrc2, imgsrc3, imgsrc4],
}
}
newIcon (n) {
let newStateArray = this.state.data.slice();
let newSubStateArray = newStateArray[n].slice();
if(clicks === 1) {
newSubStateArray[0] = this.state.imgs[0];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 2) {
newSubStateArray[0] = this.state.imgs[1];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 3) {
newSubStateArray[0] = this.state.imgs[2];
this.setState({imgsrc:newSubStateArray});
clicks++;
} else if (clicks === 4) {
newSubStateArray[0] = this.state.imgs[4];
this.setState({imgscr:newSubStateArray});
clicks++;
}
}
render () {
let { data }= this.state;
return(
<div>
{data.map((n) => {
return(
<Child imgsrc={n.imgsrc} key={n} newIcon={this.newIcon.bind(this, n)} header={n.header} />
);
})}
</div>
);
}
一些旁注:createArray 是一个创建子数组的函数,对于这个问题可能可以忽略。重要的是要知道,第一个元素称为 imgsrc,第二个元素称为
所以,这里出了点问题,但我不确定到底是什么。我的猜测是,我没有正确访问数组中的值。在上面,您可以看到我尝试对数组进行切片,然后分配新值。我遇到的另一个问题是,当我尝试从 newIcon() 函数调用 n 时,它显示为未定义。 我有点迷失了,因为我对 React 还很陌生,所以欢迎任何类型的提示和建议。
最佳答案
我会删除 newIcon
中的所有代码,并将 clicks
保留为状态的一部分。如果您有图像数组,则可以使用 clicks
作为指向应显示的下一张图像的指针。
在此示例中,我随意添加了虚拟图像来帮助解释,并将 clicks
更改为 pointer
,因为这样更有意义。
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
// clicks is called `pointer` here and initially
// is set to the first index of the imgs array
pointer: 0,
imgs: [
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png'
]
};
// Bind your class method in the constructor
this.handleClick = this.handleClick.bind(this);
}
// Here we get the length of the imgs array, and the current
// pointer position. If the pointer is at the end of the array
// set it back to zero, otherwise increase it by one.
handleClick() {
const { length } = this.state.imgs;
const { pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer + 1;
this.setState({ pointer: newPointer });
}
render() {
const { pointer, imgs } = this.state;
// Have one image element to render. Every time the state is
// changed the src of the image will change too.
return (
<div>
<img src={imgs[pointer]} onClick={this.handleClick} />
</div>
);
}
}
<强> DEMO
编辑:因为您有多个带有需要更改其来源的图像的 div,也许可以在父组件中保留一组图像,然后将这些图像的子集作为 props 传递给每个 Image 组件,然后您就可以存储在每个组件的状态中。这样您就不需要对 Image 组件进行太多更改。
class Image extends React.Component {
constructor(props) {
super(props);
this.state = { pointer: 0, imgs: props.imgs };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const { length } = this.state.imgs;
const { pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer + 1;
this.setState({ pointer: newPointer });
}
render() {
const { pointer, imgs } = this.state;
return (
<div>
<img src={imgs[pointer]} onClick={this.handleClick} />
</div>
);
}
}
class ImageSet extends React.Component {
constructor() {
super();
this.state = {
imgs: [
'https://dummyimage.com/100x100/000000/fff.png',
'https://dummyimage.com/100x100/41578a/fff.png',
'https://dummyimage.com/100x100/8a4242/fff.png',
'https://dummyimage.com/100x100/428a49/fff.png',
'https://dummyimage.com/100x100/bd86bd/fff.png',
'https://dummyimage.com/100x100/68b37c/fff.png',
'https://dummyimage.com/100x100/c9a7c8/000000.png',
'https://dummyimage.com/100x100/c7bfa7/000000.png'
]
}
}
render() {
const { imgs } = this.state;
return (
<div>
<Image imgs={imgs.slice(0, 4)} />
<Image imgs={imgs.slice(4, 8)} />
</div>
)
}
}
<强> DEMO
希望有帮助。
关于javascript - ReactJS,更改存储在状态数组中的img src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47888811/