web-dev-qa-db-fra.com

Accès à l'événement onChange à partir du composant enfant (React/Redux)

J'ai un composant conteneur qui rend un composant enfant avec une entrée. J'aimerais avoir accès à la valeur du composant enfant lors de l'événement onChange, mais j'obtiens un objet "Proxy" au lieu de la valeur d'entrée.

Composant de conteneur 

...

class InputContainer extends React.Component {

    handleChange = (val) => {
        console.log(val);

        // => Proxy { [[Handler]]: Object, [[Target]]: SyntheticEvent, [[isRevoked]]: false }
    }

    render() {
        return <Input handleChange={this.handleChange} {...this.props} />;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(InputContainer);

Composant d'entrée 

export default function Input(props) {
    return <input onChange={props.handleChange} />;
}

Pourquoi est-ce que je reçois cet objet "Proxy" et comment puis-je obtenir la valeur de l'entrée à partir de InputContainer?

javascriptreactjsredux
8
Himmel

Ce que vous voyez est une instance de SyntheticEvent . Notez que tout fonctionnera de la même manière, c’est-à-dire que cela devrait fonctionner:

console.log('ev -> ', ev.target.value);

Toutefois, si vous souhaitez voir les valeurs dans les outils de développement, essayez:

console.log('ev -> ', ev.nativeEvent);

Source: https://facebook.github.io/react/docs/events.html

Citation:

Vos gestionnaires d'événements se verront transmettre des instances de SyntheticEvent, un wrapper multi-navigateurs entourant l'événement natif du navigateur. Il a la même interface que l'événement natif du navigateur, y compris stopPropagation () et preventDefault (), à l'exception des événements qui fonctionnent de manière identique sur tous les navigateurs. Si vous estimez avoir besoin de l'événement de navigateur sous-jacent pour une raison quelconque, utilisez simplement l'attribut nativeEvent pour l'obtenir. 

13
Guy

C'est parfaitement normal. Vous pouvez accéder à la valeur via event.target.value:

handleChange(event) {
    console.log(event.target.value);
}

Plus d'informations dans les documents React.

2
Timo

Vous ne savez pas si c'est une erreur de frappe, mais vous avez hangleChange au lieu de handleChange. Quoi qu'il en soit, onChange passe un objet de type Event-, la valeur peut être trouvée dans event.target.value

handleChange(event) {
    console.log(event.target.value);

Lisez sur le système d'événements de React

0
Rob M.