Dostęp do zdarzenia onChange z komponentu potomnego (React/Redux)

Question

Mam komponent kontenera, który renderuje komponent potomny z danymi wejściowymi. Chciałbym mieć dostęp do wartości składnika podrzędnego podczas zdarzenia onChange, ale otrzymuję obiekt "Proxy" zamiast wartości wejściowej.

Pojemnik Komponent

... 

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); 

Wejście komponentowe

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

Dlaczego otrzymuję tego obiektu "Proxy" i jak mogę uzyskać wartość wejście jest z InputContainer?

Answer 1

Co widzisz jest instancją Reaguj na SyntheticEvent. Zauważ, że wszystko będzie działać tak samo, czyli to powinno działać:

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

Jednakże, jeśli chcesz zobaczyć wartości w narzędziach dla programistów spróbować:

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

Źródło: https://facebook.github.io/react/docs/events.html

Cytat :

Twoje programy obsługi zdarzeń będą przekazywane instancjami aplikacji SyntheticEvent, która otacza wiele przeglądarek rodzime wydarzenie przeglądarki. Ma ten sam interfejs, co macierzyste zdarzenie przeglądarki, w tym stopPropagation() i preventDefault(), z wyjątkiem tego, że zdarzenia działają identycznie we wszystkich przeglądarkach. Jeśli okaże się, że z jakiegoś powodu potrzebne jest zdarzenie związane z przeglądarką, po prostu użyj atrybutu nativeEvent, aby go uzyskać.

Answer 2

Nie jestem pewien, czy to błąd literowy, ale zamiast handleChange masz numer hangleChange. W każdym razie, onChange przejdą Event -jak obiektu wartość można znaleźć w event.target.value

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

Read up on React's event system

Answer 3

jest zjawiskiem normalnym. Możesz uzyskać dostęp do wartości poprzez event.target.value:

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

More info in the React docs.