javascript - 调用react函数

Question

如何从另一个类和文件调用函数 _toggleDropdown 或 _onWindowClick？

DropDown.js

export default class DropDown extends React.Component {

  _toggleDropdown(e) {
    e.preventDefault()
    this.setState({
      isActive: !this.state.isActive
    })
  }

  _onWindowClick(event) {
    const dropdownElement = findDOMNode(this)
    if (event.target !== dropdownElement && !dropdownElement.contains(event.target) && this.state.isActive) {
      this.setState({
        isActive: false
      })
    }
  }
}

Header.js

<a onClick={what???}>test</a>

Answer 1

如果 DropDown 组件在 Header 中呈现，您可以使用 refs 获取下拉实例并调用其方法。

Header.js

render() {
   return (<div>
      <DropDown ref="dd"/>
      <a onClick={e => this.refs.dd._toggleDropdown(e)}>Toggle</a>
  </div>)
}

如果它们完全不相关，您最好从本地状态切换到某些全局状态管理解决方案，例如 Flux 或 Redux。并使下拉状态成为全局应用程序状态的一部分，任何组件都可以通过分派(dispatch)相应的操作来更改该状态。