Javascript onClick事件返回代理对象,而不是ReactJX中的事件处理程序对象
我尝试在输入的更改事件上比较输入的键代码,但当我尝试时,我只看到代理对象而不是事件处理程序对象。我找不到任何解决办法。在另一个组件中我实现了它,但在这个组件中我不能 我的处理函数是:Javascript onClick事件返回代理对象,而不是ReactJX中的事件处理程序对象,javascript,reactjs,Javascript,Reactjs,我尝试在输入的更改事件上比较输入的键代码,但当我尝试时,我只看到代理对象而不是事件处理程序对象。我找不到任何解决办法。在另一个组件中我实现了它,但在这个组件中我不能 我的处理函数是: handleChange(event){ this.setState({ searchValue : this.searchInput.value }); if(this.searchInput.value.length>2&&!this.state.r
handleChange(event){
this.setState({
searchValue : this.searchInput.value
});
if(this.searchInput.value.length>2&&!this.state.recommendation&&this.focused){
this.setState({
recommendation:true
});
} else if(this.searchInput.value.length<3&&this.state.recommendation&&this.focused) {
this.setState({
recommendation:false
});
return;
}
console.log(event) //event is returned as Proxy object
if(event.keyCode === 13){
this.context.router.history.push(`/yardim/arama/${this.searchInput.value}`);
return;
}
if(this.searchInput.value.length>2){
this.bouncer.handle();
}
}
render(){
return(
<div id="faq-search-box">
{this.state.recommendation}
<i className="icon hb-icon-search_icon"></i>
<input id="faq-search-input" type="text" placeholder="Yardım konusu ara..." value={this.state.searchValue} ref={input=>{this.searchInput=input;}} onChange={this.handleChange.bind(this)} onFocus={this.onFocus} onBlur={this.onBlur} />
<div className="clearfix"></div>
{ this.state.recommendation &&
<div id="faq-recommendation-box">
{this.props.FAQRecomendations&&
<ul>
{this.props.FAQRecomendations.map((faq)=>
<li key={faq.id}><a onMouseDown={(e)=>{this.onMouseDown(`/yardim/${faq.slug}#${faq.id}`,e)}} title={faq.name}>{faq.name}</a></li>
)}
</ul>
}
</div>
}
</div>
)
}
handleChange(事件){
这是我的国家({
searchValue:this.searchInput.value
});
if(this.searchInput.value.length>2&&!this.state.recommendation&&this.focused){
这是我的国家({
建议:正确
});
}else if(this.searchInput.value.length2){
这个.bouncer.handle();
}
}
渲染功能是:
handleChange(event){
this.setState({
searchValue : this.searchInput.value
});
if(this.searchInput.value.length>2&&!this.state.recommendation&&this.focused){
this.setState({
recommendation:true
});
} else if(this.searchInput.value.length<3&&this.state.recommendation&&this.focused) {
this.setState({
recommendation:false
});
return;
}
console.log(event) //event is returned as Proxy object
if(event.keyCode === 13){
this.context.router.history.push(`/yardim/arama/${this.searchInput.value}`);
return;
}
if(this.searchInput.value.length>2){
this.bouncer.handle();
}
}
render(){
return(
<div id="faq-search-box">
{this.state.recommendation}
<i className="icon hb-icon-search_icon"></i>
<input id="faq-search-input" type="text" placeholder="Yardım konusu ara..." value={this.state.searchValue} ref={input=>{this.searchInput=input;}} onChange={this.handleChange.bind(this)} onFocus={this.onFocus} onBlur={this.onBlur} />
<div className="clearfix"></div>
{ this.state.recommendation &&
<div id="faq-recommendation-box">
{this.props.FAQRecomendations&&
<ul>
{this.props.FAQRecomendations.map((faq)=>
<li key={faq.id}><a onMouseDown={(e)=>{this.onMouseDown(`/yardim/${faq.slug}#${faq.id}`,e)}} title={faq.name}>{faq.name}</a></li>
)}
</ul>
}
</div>
}
</div>
)
}
render(){
返回(
{this.state.recommendation}
{this.searchInput=input;}}onChange={this.handleChange.bind(this)}onFocus={this.onFocus}onBlur={this.onBlur}/>
{本.州.建议&&
{this.props.faq建议&&
{this.props.FAQRecomendations.map((faq)=>
- {this.onMouseDown(`/yardim/${faq.slug}}{faq.id},e)}}title={faq.name}>{faq.name}
)}
}
}
)
}
有什么问题?如何访问事件处理程序
请尝试侦听onKeyDown事件。这是演示
类演示扩展了React.Component{
构造函数(){
超级()
此.state={
消息:“”
}
}
onKeyDown(e){
如果(如keyCode===13){
console.log('按Enter键');
}
}
手变(e){
这是我的国家({
信息:e.target.value
});
}
render(){
返回
;
}
}
ReactDOM.render(
,
document.getElementById('容器')
);代码>
我找到的解决方案就是这样。出现问题是因为
代理对象上有一个名为nativeEvent的对象
多亏了它,我获得了钥匙密码
例如:
...
if(event.nativeEvent.keyCode === 13){
this.context.router.history.push(`/yardim/arama/${this.searchInput.value}`);
return;
}
...
检查答案。您需要检查按键事件未更改。@bennygenel未更改。我也得到了同样的结果。我想,不管是按键盘还是换键盘,我都能解决这个问题。事件代理上有一个对象名。这是nativeEvent。我表达了对它的感谢。