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

【问题标题】：Adding onKeyPress to existing <a onClick={}></a>将 onKeyPress 添加到现有 <a onClick={}></a>
【发布时间】：2017-09-16 04:53:01
【问题描述】：

我一直在尝试将几个 onKeyPress 添加到我的 React.js 项目中的现有 onClick 标记中，更具体地说，能够在切换到链接后按 Enter 来触发 onClick。当我插入一个简单的 console.log() 进行测试时，我的代码中的 onKeyPress 可以正常工作，但是当我插入函数时它会失败。为简洁起见，我省略了不相关的代码部分。本质上，我需要单击并 Enter 来做同样的事情。谢谢！！！

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

【问题讨论】：

你能解释一下失败部分吗？

标签： javascript reactjs

【解决方案1】：

另一种选择是让浏览器为您处理它，尤其是因为您已经在使用a 标记。添加href="#" 可能不太好，但它可能比每次渲染都重新生成的函数要好。另外，自定义选项卡实现没有开销。

在这里试试：

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>

【讨论】：

【解决方案2】：

看起来像是语法错误。这行得通吗？如果没有，你得到了什么错误？

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

【讨论】：

【解决方案3】：

我认为您将两种语法混合在一起。

你可以改变这个；

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

有了这个；

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

或者用这个；

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

【讨论】：

【解决方案4】：

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

我认为这是你失败的地方。您这里的代码只是将新上下文绑定到一个函数，但没有调用它。

【讨论】：