I have an onclick handler:
render() {
return (
<div>
<div className={className} onClick={this.target.bind(this,id)}>{name}</div>
</div>
)
}
and here is the function:
target(test, event) {
event.target.className="addClasss";
}
I was trying the above way to addClass on event target, however is there a better way to do this? Thanks
Instead of adding a class manually to a DOM element, you can e.g. add an additional state variable that keeps track of the element that has been clicked. You can then use this in the render method to choose which element that should get the class added to it.
Example
class App extends React.Component {
state = {
arr: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }],
clicked: null
};
target(id) {
this.setState({ clicked: id });
}
render() {
const { arr, clicked } = this.state;
return (
<div>
{arr.map(element => (
<div
className={clicked === element.id && "addClass"}
onClick={this.target.bind(this, element.id)}
>
{element.name} {clicked === element.id && "clicked!"}
</div>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
class App extends React.Component {
state = {
clicked: false,
};
handleClick = () => {
this.setState({ clicked: true });
}
render() {
const { clicked } = this.state;
const className = clicked ? "newClass" : "";
const name = "add newClass";
return (
<div>
<div className={className} onClick={this.handleClick}>{name}</div>
</div>
);
}
}
A little late but for future searchers: use jquery:
target(test, event) {
var element = $(event.target)
element.addClass('your class');
}
OBS: I agree partially with the answers above, react was made to work with states but there are some cases that we don't want to care about controlling every single aspect of our code with states, specially when there are a repetitive class, so I found easier to target these elements with jquery.
