javascript - 无法让 onMouseEnter 改变 react.js 中的状态

Question

我正在尝试使用 React 组件将类名添加到 div。这就是我所拥有的。顺便说一句，我对 react 还很陌生。

class PrimaryNavigation extends Component {

  constructor(props) {
    super(props);

    this.state = {
      condition: false
    };
  }

  onMouseEnterHandler() {
    this.setState({
      condition: !this.state.condition
    });
  }

  clickHandlerFor(component) {
    return (e) => {
      if (typeof this.props.onClick !== 'function') {
        return;
      }
      e.preventDefault();
      var componentData = this.componentDataFor(component);
      this.props.onClick(e, componentData);
    };
  }

  componentDataFor(component) {
    ...
  }

  render(): ReactElement {
    ...
    return (
      <div className='PrimaryNavigation'>
        <nav className='PrimaryNavigation-Links'>
          <ul>
            ...
            <li className="dropdown" onMouseEnter={this.onMouseEnterHandler}>
              <Link to='/account' className='PrimaryNavigation-link dropbtn'>
                <span className='PrimaryNavigation-label'><FormattedMessage id='navigation.my_account' /></span>
              </Link>
              <div id="myDropdown" className={this.state.condition ? "dropdown-content show" : "dropdown-content" }>
                <div className="dropdown-box">
                ...
                </div>
              </div>
            </li>

          </ul>
        </nav>
      </div>
    );
  }
}

对于其中包含三元条件的 div，如果我将其保留为 this.state.condition，则会显示 "dropdown-content" 的类名。当我将其更改为 !this.state.condition 时，"dropdown-content show" 的类名就会显示出来。这意味着我遇到的问题是改变状态。在我的 onMouseEnterHandler() 函数中，我已将条件更改为 true。依然没有。

我能做什么？另外，如果我的问题表述有误，欢迎提出任何修改建议。

Answer 1

您需要将 onMouseEnterHandler() 方法绑定(bind)到构造函数中的组件实例，否则 this 上下文将不是组件和 setState( ) 将是未定义的。查看更新后的代码:

class PrimaryNavigation extends Component {

  constructor(props) {
    super(props);

    this.state = {
      condition: false
    };

    this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
  }

  onMouseEnterHandler() {
    this.setState({
      condition: !this.state.condition
    });
  }

  clickHandlerFor(component) {
    return (e) => {
      if (typeof this.props.onClick !== 'function') {
        return;
      }
      e.preventDefault();
      var componentData = this.componentDataFor(component);
      this.props.onClick(e, componentData);
    };
  }

  componentDataFor(component) {
    ...
  }

  render(): ReactElement {
    ...
    return (
      <div className='PrimaryNavigation'>
        <nav className='PrimaryNavigation-Links'>
          <ul>
            ...
            <li className="dropdown" onMouseEnter={this.onMouseEnterHandler}>
              <Link to='/account' className='PrimaryNavigation-link dropbtn'>
                <span className='PrimaryNavigation-label'><FormattedMessage id='navigation.my_account' /></span>
              </Link>
              <div id="myDropdown" className={this.state.condition ? "dropdown-content show" : "dropdown-content" }>
                <div className="dropdown-box">
                ...
                </div>
              </div>
            </li>

          </ul>
        </nav>
      </div>
    );
  }
}

请在此处查看相关的 React 文档:https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding