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。并通过调度相应的动作使下拉状态成为任何组件可以改变的全局应用程序状态的一部分。

Answer 2

这样做的唯一方法是将函数作为props传递给Header组件。我不确定你的结构如何制作一个结果清晰的片段。也许设计不够清晰，无法让你轻松。

呼吁功能反应

2 个答案: