Access onChange event from child component (React / Redux)

Question

I have a container component that creates a child component with input. I would like to have access to the value of the child component during the onChange event, but I get a "Proxy" object instead of the input value.

Container component

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

Input component

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

Why am I getting this proxy object and how can I get the input value from the InputContainer ?

Answer 1

What you see is an instance of React SyntheticEvent . Please note that everything will work the same way, i.e. This should work:

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

However, if you want to see the values ​​in the developer tools, try:

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

Source: https://facebook.imtqy.com/react/docs/events.html

Quote:

Event handlers will be passed instances of SyntheticEvent, a cross-browser shell around the native browser event. It has the same interface as the native browser event, including stopPropagation () and preventDefault (), except that events work the same in all browsers. If for some reason you find that you need a basic browser event, just use the nativeEvent attribute to get it.

Answer 2

This is completely normal. You can access the value through event.target.value :

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

More information in React docs.

Answer 3

Not sure if this is an input error, but you have a hangleChange instead of handleChange . In any case, onChange passes an Event -like object, the value can be found in event.target.value

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

Read the React Event System