Réagissez le gestionnaire d'événements JS onClick
J'ai
var TestApp = React.createClass({
getComponent: function(){
console.log(this.props);
},
render: function(){
return(
<div>
<ul>
<li onClick={this.getComponent}>Component 1</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp />, document.body);
Je souhaite colorer l'arrière-plan de l'élément de liste sur lequel vous avez cliqué. Comment puis-je faire cela dans React?
Quelque chose comme
$('li').on('click', function(){
$(this).css({'background-color': '#ccc'});
});
Pourquoi pas simplement:
onItemClick: function (event) {
event.currentTarget.style.backgroundColor = '#ccc';
},
render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick}>Component 1</li>
</ul>
</div>
);
}
Et si vous souhaitez être plus réactif à ce sujet, vous pouvez définir l'élément sélectionné comme étant l'état de son composant React contenant, puis référencer cet état pour déterminer la couleur de l'élément dans render:
onItemClick: function (event) {
this.setState({ selectedItem: event.currentTarget.dataset.id });
//where 'id' = whatever suffix you give the data-* li attribute
},
render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick} data-id="1" className={this.state.selectedItem == 1 ? "on" : "off"}>Component 1</li>
<li onClick={this.onItemClick} data-id="2" className={this.state.selectedItem == 2 ? "on" : "off"}>Component 2</li>
<li onClick={this.onItemClick} data-id="3" className={this.state.selectedItem == 3 ? "on" : "off"}>Component 3</li>
</ul>
</div>
);
},
Bien sûr, vous voudriez mettre ces <li>s dans une boucle et vous devez faire en sorte que les styles li.on et li.off définissent votre background-color.
Je peux penser à deux choses
var TestApp = React.createClass({
getComponent: function(index) {
$(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
'background-color': '#ccc'
});
},
render: function() {
return (
<div>
<ul>
<li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
<li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
<li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp /> , document.getElementById('soln1'));
Ceci est mon préféré.
var ListItem = React.createClass({
getInitialState: function() {
return {
isSelected: false
};
},
handleClick: function() {
this.setState({
isSelected: true
})
},
render: function() {
var isSelected = this.state.isSelected;
var style = {
'background-color': ''
};
if (isSelected) {
style = {
'background-color': '#ccc'
};
}
return (
<li onClick={this.handleClick} style={style}>{this.props.content}</li>
);
}
});
var TestApp2 = React.createClass({
getComponent: function(index) {
$(this.getDOMNode()).find('li:nth-child(' + index + ')').css({
'background-color': '#ccc'
});
},
render: function() {
return (
<div>
<ul>
<ListItem content="Component 1" />
<ListItem content="Component 2" />
<ListItem content="Component 3" />
</ul>
</div>
);
}
});
React.renderComponent(<TestApp2 /> , document.getElementById('soln2'));
J'espère que ça aide.
Voici comment vous définissez un gestionnaire d’événements react onClick , qui répondait au titre de la question ... en utilisant la syntaxe es6
import React, { Component } from 'react';
export default class Test extends Component {
handleClick(e) {
e.preventDefault()
console.log(e.target)
}
render() {
return (
<a href='#' onClick={e => this.handleClick(e)}>click me</a>
)
}
}
Utilisez ECMA2015. Les fonctions de flèche rendent "ceci" beaucoup plus intuitif.
import React from 'react';
class TestApp extends React.Component {
getComponent(e, index) {
$(e.target).css({
'background-color': '#ccc'
});
}
render() {
return (
<div>
<ul>
<li onClick={(e) => this.getComponent(e, 1)}>Component 1</li>
<li onClick={(e) => this.getComponent(e, 2)}>Component 2</li>
<li onClick={(e) => this.getComponent(e, 3)}>Component 3</li>
</ul>
</div>
);
}
});
React.renderComponent(<TestApp /> , document.getElementById('soln1'));`
Si vous utilisez ES6, voici un exemple de code simple:
import React from 'wherever_react_is';
class TestApp extends React.Component {
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export default TestApp;
Dans les corps de classe ES6, les fonctions ne nécessitent plus le mot clé 'function' et elles n'ont pas besoin d'être séparées par des virgules. Vous pouvez également utiliser la syntaxe => si vous le souhaitez.
Voici un exemple avec des éléments créés dynamiquement:
import React from 'wherever_react_is';
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{name: 'Name 1', id: 123},
{name: 'Name 2', id: 456}
]
}
}
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
<div>
<ul>
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li>
)}
)}
</ul>
</div>
);
}
}
export default TestApp;
Notez que chaque élément créé dynamiquement doit avoir une référence unique "clé".
De plus, si vous souhaitez passer l'objet de données réel (plutôt que l'événement) dans votre fonction onClick, vous devrez le transmettre dans votre lien. Par exemple:
Nouvelle fonction onClick:
getComponent(object) {
console.log(object.name);
}
En passant dans l'objet de données:
{this.state.data.map(d => {
return(
<li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li>
)}
)}
Gestion des événements avec Éléments de réaction est très similaire à la gestion des événements sur les éléments DOM. Il y a quelques différences syntaxiques:
- Les événements React sont nommés en utilisant camelCase, plutôt qu'en minuscule.
- Avec JSX, vous transmettez une fonction en tant que gestionnaire d'événements plutôt qu'une chaîne.
Donc, comme mentionné dans React documentation, ils ressemblent beaucoup au HTML normal en ce qui concerne la gestion d'événements, mais les noms d'événements dans React utilisant camelcase, parce qu'ils ne sont pas vraiment du HTML, ils sont JavaScript nous passons appel de fonction dans un format de chaîne pour HTML, ils sont différents, mais les concepts sont assez similaires ...
Regardez l'exemple ci-dessous, faites attention à la façon dont l'événement est transmis à la fonction:
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
import React from 'react';
class MyComponent extends React.Component {
getComponent(event) {
event.target.style.backgroundColor = '#ccc';
// or you can write
//arguments[0].target.style.backgroundColor = '#ccc';
}
render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}
export { MyComponent }; // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;2019+: vous devriez maintenant utiliser les crochets à réaction
introduit dans React 16.8: https://reactjs.org/docs/hooks-intro.html
Qu'est-ce qu'un crochet? Un crochet est une fonction spéciale qui vous permet de “raccrocher” Réagissez les caractéristiques. Par exemple, useState est un crochet qui vous permet d'ajouter Etat de réaction aux composants fonctionnels.
Quand utiliserais-je un crochet? Si vous écrivez un composant de fonction et réalisez vous devez y ajouter un état, auparavant vous deviez le convertir en une classe. Vous pouvez maintenant utiliser un crochet dans la fonction existante composant.
Ce sera quelque chose comme:
import React, { useState } from 'react';
function Example() {
const [itemId, setItem] = useState();
return (
<div>
<ul>
<li onClick={() => setItem(1)} className={itemId == 1 ? "on" : "off"}>Component 1</li>
<li onClick={() => setItem(2)} className={itemId == 2 ? "on" : "off"}>Component 2</li>
<li onClick={() => setItem(3)} className={itemId == 3 ? "on" : "off"}>Component 3</li>
</ul>
</div>
);
}