Child bileşeninden onChange olayına erişme (React/Redux)

Question

Giriş içeren bir alt bileşeni oluşturan bir kapsayıcı bileşenim var. onChange olayında alt bileşenin değerine erişmek istiyorum, ancak giriş değeri yerine bir "Proxy" nesnesi alıyorum.

Konteyner Bileşen

... 

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

Girdi Bileşen

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

Neden bu "Proxy" nesne alıyorum ve nasıl InputContainer gelen girişin değerini alabilirim?

Answer 1

. Bu çalışması gerekir yani her şey aynı çalışacağını unutmayın:

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

Ancak, Geliştirici araçları değerlerini görmek istiyorsanız deneyin:

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

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

Teklif :

Etkinlik işleyicileriniz, çapraz tarayıcı sarıcısı olan SyntheticEvent örneklerinden geçirilecek tarayıcının yerel etkinliği. Olaylar tüm tarayıcılarda aynı şekilde çalışmak dışında, stopPropagation() ve preventDefault() dahil olmak üzere tarayıcının yerel etkinliği ile aynı arabirime sahiptir. Herhangi bir nedenden ötürü temel tarayıcı etkinliğine ihtiyacınız olduğunu fark ederseniz, bunu almak için nativeEvent özniteliğini kullanın.

Answer 2

Yazım hatası olup olmadığından emin değilsiniz, ancak handleChange yerine hangleChange var. Yine de, onChange bir Event benzeri nesne geçer değeri

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

Bu normaldir

Read up on React's event system

Answer 3

event.target.value bulunabilir. Sen event.target.value aracılığıyla değerini erişebilirsiniz: Ne görüyoruz Tepki en SyntheticEvent bir örneğidir

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

More info in the React docs.