Доступ к событию onChange из дочернего компонента (React/Redux)

Question

У меня есть компонент контейнера, который создает дочерний компонент со входом. Я хотел бы иметь доступ к значению дочернего компонента во время события onChange, но я получаю объект «Прокси» вместо входного значения.

Контейнер Компонент

... 

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

Компонентный вход

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

Почему я получаю этот "прокси" объект и как я могу получить значение на вход от InputContainer?

Answer 1

То, что вы видите, является экземпляром РЕАКТА SyntheticEvent. Обратите внимание, что все будет работать так же, то есть это должно работать:

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

Однако, если вы хотите, чтобы увидеть значения в инструментах разработчика попробовать: Цитата https://facebook.github.io/react/docs/events.html

:

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

Источник :

Вашим обработчикам событий будут переданы экземпляры SyntheticEvent, кросс-браузерной оболочки вокруг родное событие браузера. Он имеет тот же интерфейс, что и собственное событие браузера, включая stopPropagation() и preventDefault(), за исключением того, что события работают одинаково во всех браузерах. Если по какой-то причине вы обнаружите, что вам требуется базовое событие браузера, просто используйте атрибут nativeEvent, чтобы получить его.

Answer 2

Не уверен, что это типичная ошибка, но у вас есть hangleChange вместо handleChange. Во всяком случае, onChange проходит Event -как объект, значение может быть найден в event.target.value

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

Read up on React's event system

Answer 3

Это совершенно нормально. Вы можете получить доступ к значению через event.target.value:

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

More info in the React docs.