javascript - React：如何使用 react-image-picker 选择多个图像

Question

我react-image-picker用来选择图像，我只能选择一张图像。我想选择多个图像。

我不知道该怎么做。有什么建议么？

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;

标签： javascriptreactjs

Answer 1

添加道具multiple，调整状态就可以了

• 参考：demo.js

• 在线尝试

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'))