Событие ReactJS onClick для элемента массива

Question

Мне нужно выбрать изображения в сетке изображений.В настоящее время я могу выбрать только одно изображение за раз.При выборе одного, другой отменяет выбор.Я хотел бы выбрать каждое изображение, которое я хочу (много изображений, выбранных за один раз).Я не могу активировать логическое значение isToggle для каждого элемента с событием onClick.

class Gallery extends Component{
  constructor(props) {
    super(props);
    this.state = {
    //isToggleOn: true,
    selected: '',
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleClick = key => {
    this.setState(state => ({
      //isToggleOn: !state.isToggleOn,
      selected: key,
    }));
    //console.log(this.state)
  } 

  render(){
  //const classes = useStyles();
  return (
    <Container>
    <Row >
    <Col>
    <div style={styles.root}>
      <GridList cellHeight={160} style={styles.gridList} cols={3}>
        {tileData.map((tile,i) => (
          <GridListTile key={i} cols={tile.cols || 1} onClick={() => this.handleClick(tile)} >
            <img src={tile.img} alt={tile.title} style={this.state.selected === tile  ? styles.inputClicked:styles.inputNormal} />
          </GridListTile>
        ))}
      </GridList>
    </div>
    </Col>
    </Row>
    </Container>
  );
}
}


export default Gallery;

I can only select one image at a time. I expect to select many at a time.

Answer 1

Когда на плитке нажимают, вам нужно добавить в массив выбранных плиток, как это:

handleClick = tile => {
    this.setState({
      selected: this.state.selected.concat([tile]),
    });
  } 

затем при рендеринге вы можете проверить, выбрана ли плитка что-то вроде этого:

<img src={tile.img} alt={tile.title} style={isSelected(this.state.selected, tile)  ? styles.inputClicked:styles.inputNormal} />

с:

isSelected = (selected, tile) => {
    // some logic to check that the tile is already selected e.g.
    return selected.find(tileItem => tileItem.title === tile.title)
}

Убедитесь, что в конструкторе инициализировано выбранное состояние []:

this.state = {
    selected: [],
    };

UPDATE:

Если вы тоже хотите удалить плитки, вам нужно сделать что-то вроде этого:

handleClick = tile => {
    const { selected } = this.state;
    if(selected.find(item ==> item.title === tile.title)) {
       // need to remove tile
       this.setState({
         selected: selected.filter(item => item.tile !== tile.title),
       });
    } else {
       this.setState({
         selected: this.state.selected.concat([tile]),
       });
    }
  }