Question

我一直在尝试将几个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>
        );
    }
}

Answer 1

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

在这里试试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

<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

我认为你将2种语法混合在一起。

您可以更改此内容;

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

Answer 4

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

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

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

4 个答案: