onClick Event return Proxy object instead of event handler object in ReactJX

Question

I try to compare entered key code on change event of input but when I try it, I only see Proxy object instead of event handler object. I couldn't find any solution. In another component I achieved it but in this component I can't.

My handler function is :

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

and render function is :

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

What is the problem? How can I Access the event handler?

Check the answer here. You need to check keyPress event not change. — bennygenel
– bennygenel, Commented Sep 5, 2017 at 10:29
@bennygenel not changed. I had same result. I think, it does not matter onkeypress or onchange for this. — Kamuran Sönecek
– Kamuran Sönecek, Commented Sep 5, 2017 at 10:34

Kamuran Sönecek · Accepted Answer · 2017-09-05 11:27:45Z

5

The solution which I found is that. The problems is occured because of SyntheticEvent.

There is an object on Proxy object as called nativeEvent.

Thanks of it I achieved the keyCode.

For Example:

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

edited Sep 5, 2017 at 11:27

answered Sep 5, 2017 at 11:17

Kamuran Sönecek

3,3402 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dev · Accepted Answer · 2017-09-05 11:02:08Z

1

Please try to listen onKeyDown event. Here is the demo.

class Demo extends React.Component {
   constructor() {
      super()
      this.state = {
        message:''
      }
   }
   
   onKeyDown(e) {
    if (e.keyCode === 13) {
     console.log('Enter Key Pressed');
    }
  }
  
  handleChange(e) {
    this.setState({
    	message: e.target.value
    });
  }
  
  render() {
    return <div>
    	    <input
              value={this.state.message}
              onChange={this.handleChange.bind(this)}
              onKeyDown={this.onKeyDown}
            />
    	   </div>;
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>

answered Sep 5, 2017 at 11:02

Dev

3,9323 gold badges26 silver badges44 bronze badges

1 Comment

Kamuran Sönecek Over a year ago

I solve a solution. There is an object name on event Proxy. It is nativeEvent. I achieved the expression thanks of it.

Collectives™ on Stack Overflow

onClick Event return Proxy object instead of event handler object in ReactJX

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related