React: [bug] Les événements React onChange Synthetic / Proxy sont en cours de recyclage, problème lorsque le gestionnaire est rejeté
Quel est le comportement actuel ?
Confirmé à partir de 0.14.7 mais se produit également aujourd'hui dans 15.3.2.
https://jsfiddle.net/dimitar/7ktbfetb/
class Foo extends React.Component {
render(){
const handleChange = _.debounce(this.props.onChange, 500);
return <input onChange={handleChange} />
}
}
ReactDOM.render(<Foo onChange={e => console.log(e.target, e)} />, document.querySelector('div'));
attendez-vous à obtenir e.target , obtenez null
sans l'anti-rebond, fonctionne comme prévu. https://jsfiddle.net/dimitar/7ktbfetb/1/
peut-être lié à https://github.com/facebook/react/commit/3285d834402a60d241188a1deacf8250b50239cf - pour https://github.com/facebook/react/blob/master/CHANGELOG.md#react -9
DimitarChristoff
Tous les 3 commentaires
Pour ceux qui recherchent une solution de contournement, vous pouvez utiliser e.persist()
par exemple. return <input onChange={e => handleChange(e.persist()||e)} />
DimitarChristoff
le 20 sept. 2016
C'est à cause du fonctionnement de l'anti-rebond. Il va utiliser setTimeout pour envoyer un appel à la prochaine boucle d'événements. Comme vous l'avez noté, en raison de la mise en commun, cela signifie que React a déjà renvoyé l'événement synthétique dans le pool et réinitialisé les champs. Si vous utilisez debounce ou toute autre chose qui nécessite que l'événement existe en dehors du gestionnaire d'événements de React (par exemple, le code asynchrone), vous devez persister.
C'est par conception, donc il n'y a rien à faire à ce sujet pour le moment. Il y a une discussion dans # 6190 sur la suppression potentielle de la mise en commun, ce qui devrait faire fonctionner votre code sans persistance explicite.
zpao
le 21 sept. 2016
cela va à l'encontre des principes mêmes de réaction établis pour résoudre autour du flux de données, de l'immuabilité et de l'évitement des effets secondaires. vous passez un objet à un composant mais ce n'est qu'un instantané qui doit être utilisé dans la même boucle d'événements car vous vous méfiez du GC et des utilisateurs qui peuvent créer une fuite par inadvertance ...
alors que cela aurait pu être une bonne idée à l'époque, certains d'entre nous n'ont besoin que de prendre en charge des navigateurs à feuilles persistantes capables d'un GC adéquat. peut-être, en attendant que cette approche soit reconsidérée, un flag/env var peut être défini pour désactiver la mise en commun.
DimitarChristoff
le 21 sept. 2016
Questions connexes
bloodyowl
·
3Commentaires
zpao
·
3Commentaires
zpao
·
3Commentaires
zpao
·
3Commentaires
Prinzhorn
·
3Commentaires
Commentaire le plus utile
Pour ceux qui recherchent une solution de contournement, vous pouvez utiliser
e.persist()par exemple.
return <input onChange={e => handleChange(e.persist()||e)} />