javascript - onClick 事件返回代理对象而不是 ReactJX 中的事件处理程序对象

标签 javascript reactjs

我尝试在输入的更改事件上比较输入的键代码,但是当我尝试它时,我只看到代理对象而不是事件处理程序对象。我找不到任何解决方案。在另一个组件中我实现了它,但在这个组件中我不能。

我的处理函数是:

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

问题是什么?如何访问事件处理程序?

最佳答案

我找到的解决方案是这样的。问题是由于 SyntheticEvent 而发生的.

Proxy 对象上有一个名为 nativeEvent 的对象。

感谢它,我获得了 keyCode。

例如:

... 
    if(event.nativeEvent.keyCode === 13){
          this.context.router.history.push(`/yardim/arama/${this.searchInput.value}`);
          return;
        }
...

关于javascript - onClick 事件返回代理对象而不是 ReactJX 中的事件处理程序对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46052729/

相关文章:

javascript - 在所有数据都存在之前,如何防止 Angular 渲染页面?

reactjs - 在 slatejs 编辑器中反序列化嵌套 html

node.js - X-Content-Encoding-Over-Network 位于响应 header 中,但不位于 Content-Encoding 中

mysql - 如何使用 reactjs 和 nodejs 将注册表单数据保存在数据库(mysql)中?

javascript - 如何从javascript调用指令函数

javascript - (Google Embed API) 如何更改图表表格样式的宽度

javascript - Next.js - 如何在 <head> 内添加带有文字 onload 属性字符串值的 <link> 标记?

javascript - 我有一个带有 onClick 处理程序的 div,还有带有 onClick 事件的按钮。如何防止按钮触发 div onclick?

javascript - 如何将两个 SVG 的顶部并排对齐?

javascript - 使用 JavaScript/jQuery 从外部加载 Bootstrap 4 Modal 的内容