将onKeyPress添加到现有<a onClick={}></a>

Question

I have been attempting to add several onKeyPress to existing onClick tags in my React.js project, more specifically, being able to press Enter to fire off an onClick after tabbing to a link. The onKeyPress in my code works properly when I insert a simple console.log() to test, however it fails when I insert the function. I left out irrelevant portions of code for brevity. Essentially I need click and Enter to do the same thing. Thanks!!!

class Link extends React.Component {

    changeSection(e) {
        // code to change section
    }

    render() {
        return (
            <div>
                <a id="menu-item" tabIndex={this.props.tabIndex} onKeyPress={(e) => {(e.key === 'Enter' ? this.changeSection.bind(this) : null)}} onClick={this.changeSection.bind(this)}>
                    {this.props.linkText}
                </a>
            </div>
        );
    }
}

Answer 1

Another option would be to let the browser handle it for you, especially because you're already using an a tag. It might not be nice to add the href="#" , but it's probably better than a function that is regenerated every render. Plus you don't have the overhead with the custom tabbing implementation.

Try it here:

 class Link extends React.Component { changeSection(e) { e.preventDefault(); console.log('Fired!'); } render() { return ( <div> <a id="menu-item" href="#" onClick={this.changeSection.bind(this)} > {this.props.linkText} </a> </div> ); } } ReactDOM.render( <Link linkText="Test" />, document.getElementById('root') ); 

 <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="root"></div> 

Answer 2

It looks like a syntax error. Does this work? If not, what error are you getting?

<a id="menu-item" tabIndex={this.props.tabIndex} onKeyPress={(e) => (e.key === 'Enter') ? this.changeSection.bind(this) : null} onClick={this.changeSection.bind(this)}>

Answer 3

You mixed 2 syntax together I think.

You can change this;

onKeyPress={(e) => {(e.key === 'Enter' ? this.changeSection.bind(this) : null)}}

With this;

onKeyPress={(e) => { 
    if(e.key === 'Enter') this.changeSection.bind(this);
    else null
}}

or with this;

onKeyPress={(e) => (e.key === 'Enter' ? this.changeSection.bind(this) : null)}

Answer 4

onKeyPress={(e) => {(e.key === 'Enter' ? this.changeSection.bind(this) : null)}}

I think this is where you fail. Your code here just binds new context to a function but doesn't call it.