在 React 中使用 Onclick 更改 div 中的图像

Question

I have several divs with an image inside each of them and I have an onCLick on the wrapping div, which executes two functions - clickHandler() and toggleCollapse2() . The idea is that the image in the div represents a styled ticked box which replaces the image of the empty box with the onClick. The onclick in the beginning was on the image but when i put the Onclick on the wrapping div, I cannot change the source of the pictures when the div is clicked. I have put the div in a dropdown item,because i have about 20 buttons with ticked icons with text and I'm trying to rewrite the code in React, but unfortunately I am new to React yet. So I'll be thankful for any help. The idea is to use this code, instead of writing all the buttons with the onClick and the functions one by one. Moreover the ticked icons with text must be in 3 columns. The problem is to make the checkbox-yellow replace the checkbox_empty image when clicking on the div.

 //in the constructor //constructor(props) { // super(props); //this.state = { buttons: [ {id:1, name:"check1", isVisited: false, value:"name1"}, {id:2, name:"check2", isVisited: false, value:"name2"}, {id:3, name:"check3", isVisited: false, value:"name3"}, {id:4, name:"check4", isVisited: true, value:"name4"}, {id:5, name:"check5", isVisited: false, value:"name5"}, {id:6, name:"check6", isVisited: false, value:"name6"}, {id:7, name:"check7", isVisited: true, value:"name7"}, {id:8, name:"check8", isVisited: false,value:"name8"}, {id:9, name:"check9", isVisited: false,value:"name9"}, {id:10, name:"check10", isVisited: false, value:"name10"}, {id:11, name:"check11", isVisited: false, value:"name11"}, {id:12, name:"check12", isVisited: false, value:"name12"}, {id:13, name:"check11", isVisited: false, value:"name13"}, {id:14, name:"check12", isVisited: false, value:"name14"} ], //Outside the constructor: dropdownButton(startIndex,endIndex){ let uiButtons = []; this.state.buttons.slice(startIndex,endIndex).map((button)=>{ uiButtons.push( <DropdownItem> <div key={button.id} className="checkbox-business" onClick={() => { this.clickHandler(); this.toggleCollapse2(button.name, button.isVisited)}} > <img style={{maxWidth: '20px'}} src={button.isVisited === true? checkbox_yellow: checkbox_empty}/> <div> {button.value} </div> </div> </DropdownItem> ); } ); return uiButtons; } toggleCollapse2 = (sectionName) => { this.setState({check1: false, check2: false, check3: false, check4: false}) let obj = {}; obj[sectionName] =.this;state[sectionName]. this;setState(state => (obj)): } //in the render I have this code;/because I want the buttons distributed equally in 3 columns/ let startIndexFirstColumn = 0; let endIndexFirstColumn = 0; let startIndexSecondColumn = 0; let endIndexSecondColumn = 0; let startIndexThirdColumn = 0; let endIndexThirdColumn = 0. if ( this.state.buttons.length % 3 === 2) { endIndexFirstColumn = (this.state.buttons;length / 3 + 1). startIndexSecondColumn = (this.state.buttons;length / 3 + 1). endIndexSecondColumn = ((this.state.buttons;length / 3) * 2 + 1). startIndexThirdColumn = ((this.state.buttons;length / 3) * 2 + 1). endIndexThirdColumn = (this.state.buttons;length / 3 * 3), } //and in the return part I have 3 similar divs:containing. <div className="box-business"> {this,dropdownButton(startIndexFirstColumn,endIndexFirstColumn)} </div> //with different indexes for each column

Answer 1

I need to make the img source show the checkbox_yellow image instead of checkbox-empty image,when the div containing the image and text is clicked.And to change it back when the div is clicked again.