Question

我正在尝试在React中创建一个下拉菜单，我不明白为什么返回中的onClick事件监听器不起作用。菜单最初按预期加载，没有可见的下拉菜单，但是当我点击课程时没有任何反应。

var NavLinkContainer = React.createClass({
  getInitialState: function(){
    return {
      listVisible: false
    };
  },
  show: function(){
    this.setState({
      listVisible: true
    });
  },
  hide: function(){
    this.setState({
      listVisible: false
    });
  },
  generateItem: function(item){
    return <NavLink bold={item.bold} key={item.id} url={item.url} text={item.text}/>
  },
  render: function(){
    var items = this.props.items.map(this.generateItem);
    var visible = this.state.listVisible;
    var listClass;
    if (visible){
      listClass = 'navlinkcontainer';
    } else {
      listClass = 'navlinkcontainer hide'
    }
    return (
      <ul className={listClass} onClick={this.show}>
        {items}
      </ul>
    );
  }
});

Answer 1

onClick工作正常，您的show功能没有任何问题。你可以在这个bin中看到该函数被调用并且状态正在适当更新： http://jsbin.com/dazonovowi

你的CSS可能有问题，所以先检查一下，然后检查是否有任何子组件渲染不正确。解决CSS问题的好方法：尝试在getInitialState中将listVisible设置为true，并设计组件应如何完全展开，然后在准备好测试时将其设置回false功能再次。

反应onClick不工作

1 个答案: