problem description
implement a highlight function in the react project. When you click on the DOM, how to remove the className? of the sibling elements
the environmental background of the problems and what methods you have tried
[environment]: the array loop is looped in the parent, and the contents of the loop are provided in the child component. (for example, the child component
[tried method]:
1, use the highlight method;
2, since the highlight is not allowed in the child component, then do it in the parent component in the same way, but the click event is mounted on the call to the child component.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
method 1:
constructor () {
super();
this.state = {
active : 0
}
}
handleClick = (event)=>{
this.setState({active: parseInt(event.target.getAttribute("index"), 10)})
}
render() {...
return (<div onClick={this.handleClick}>...</div>)
}method 2:
render (){
let items = list.map(()=>{
return <TargetSource onClick={this.handleClick} />
})
return (
...
xx ? xxx: {items}
)
}
what result do you expect? What is the error message actually seen?
[expected result]: similar to highlight
[errors actually seen]:
method 1: the highlight effect is added to the current element when you click, but the highlight effect of other sibling elements is not removed
method 2: click without any reaction
[later]: I started to do the React project without learning React, so I can only learn it by myself, so I"m a rookie. Please advise me if there"s something wrong, don"t spray it if you don"t like it, thank you.