arrays - 数组元素上的 ReactJS onClick 事件
问题描述
我需要在图像网格中选择图像。目前,我一次只能选择一张图片。选择一个时,另一个取消选择。我想选择我想要的每张图像(一次选择许多图像)。我无法使用 onClick 事件在每个元素上激活 isToggle 布尔值。
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.
解决方案
单击图块时,您需要添加到选定图块的数组中,如下所示:
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: [],
};
更新:
如果您也想删除瓷砖,则必须执行以下操作:
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]),
});
}
}
推荐阅读
- php - PHP PDO - 在连接中获取三个表的相同字段名称值
- android - 运行项目 ionic 失败命令 ionic cordova run android
- ethereum - Solidity:事件触发但状态未在委托调用后更新
- angular - 在 Firebase 存储中上传远程图像
- javascript - 从 HTML 正文中抓取 JSON 值
- hibernate - 如何在春季批处理中禁用二级缓存?
- tfs - 当密码中包含双引号时,Team Foundation 版本控制命令失败
- laravel - 雄辩的关系 - whereNotNull 不存在
- authentication - 如何使用 Xamarin.forms 使用 FaceID?
- angularjs - 将条件视图逻辑移动到控制器方法