子コンポーネント（React/Redux）からonChangeイベントへのアクセス

Question

私は、子コンポーネントを入力でレンダリングするコンテナコンポーネントを持っています。 onChangeイベント中に子コンポーネントの値にアクセスしたいのですが、入力値の代わりに "Proxy"オブジェクトが取得されています。

コンテナコンポーネント

... 

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

あなたが開発者向けツールの値を確認したい場合は、試してみてください。

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

出典：https://facebook.github.io/react/docs/events.html

引用：

イベントハンドラには、クロスブラウザラッパーであるSyntheticEventのインスタンスが渡されますブラウザのネイティブイベントstopPropagation（）やpreventDefault（）など、ブラウザのネイティブイベントと同じインターフェイスを持ちますが、イベントはすべてのブラウザで同じように動作します。 何らかの理由で、基礎となるブラウザイベントが必要な場合は、nativeEvent属性を使用して取得します。

Answer 2

入力エラーの場合はわかりませんが、の代わりにhangleChangeがあります。とにかく、onChangeはEvent様オブジェクトを渡し、値が

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

これは完全に正常である

Read up on React's event system

Answer 3

event.target.valueで見つけることができます。あなたはevent.target.valueを経由して値にアクセスすることができます

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

More info in the React docs.