Javascript React:如何使用React图像选择器选择多个图像
我正在使用react图像选择器选择图像,我只能选择一个图像。我想选择多个图像 我不知道怎么做。有什么建议吗Javascript React:如何使用React图像选择器选择多个图像,javascript,reactjs,Javascript,Reactjs,我正在使用react图像选择器选择图像,我只能选择一个图像。我想选择多个图像 我不知道怎么做。有什么建议吗 import React, { Component } from "react"; import ImagePicker from "react-image-picker"; import "react-image-picker/dist/index.css"; const img1 = "https://i.postimg.cc/wjfpKgHg/Apple-1.png"; const
import React, { Component } from "react";
import ImagePicker from "react-image-picker";
import "react-image-picker/dist/index.css";
const img1 = "https://i.postimg.cc/wjfpKgHg/Apple-1.png";
const img2 = "https://i.postimg.cc/J0C02gB3/Banana-2.png";
const img3 = "https://i.postimg.cc/QMcRqyhZ/Custard-Apple-3.png";
const img4 = "https://i.postimg.cc/gjBzPTxB/Kiwi-1.png";
const imageList = [img1, img2, img3, img4];
class ImagePic extends Component {
constructor(props) {
super(props);
this.state = {
image: null
};
this.onPick = this.onPick.bind(this);
}
onPick(image) {
this.setState({ image });
}
render() {
return (
<div>
<ImagePicker
images={imageList.map((image, i) => ({ src: image, value: i }))}
onPick={this.onPick}
/>
<button type="button" onClick={() => console.log(this.state.image)}>
OK
</button>
</div>
);
}
}
export default ImagePic;
添加道具倍数,调整状态即可
参考:
import React, { Component } from 'react'
import { render } from 'react-dom'
import ImagePicker from './react-image-picker'
import img1 from './assets/images/kitten/200.jpg'
import img2 from './assets/images/kitten/201.jpg'
import img3 from './assets/images/kitten/202.jpg'
import img4 from './assets/images/kitten/203.jpg'
const imageList = [img1, img2, img3, img4]
class Demo extends Component {
constructor(props) {
super(props)
this.state = {
images: []
}
}
onPickImages(images) {
this.setState({images})
}
render() {
return (
<div>
<h3>Multiple Select</h3>
<ImagePicker
images={imageList.map((image, i) => ({src: image, value: i}))}
onPick={this.onPickImages.bind(this)}
multiple
/>
<textarea rows="4" cols="100" value={this.state.images && JSON.stringify(this.state.images)} disabled/>
</div>
)
}
}
render(<Demo/>, document.querySelector('#root'))