在另一个组件中反应JS调用函数

时间:2015-07-15 22:52:32

标签: javascript reactjs mousetrap

我正在尝试使用Mousetrap库从React中的另一个组件调用一个函数。

class Parent extends React.Component {
    constructor() {
      super();

    } 
    ...
    render() {
      return(...);
    }
}
class Child extends React.Component {
    constructor() {
      super();
      this.state = { show: false };
      this.open = this.open.bind(this);
      this.close = this.close.bind(this);
    }
    open() {
      this.setState({ show: true });
    }
    close() {
      this.setState({ show: true });
    }
    render() {
      return(...);
    }
}

现在,我想要做的是在父节点的某处调用Mousetrap.bind('e', function(e) { Child.open() });(因为父节点将被渲染,子节点将仅在此命令上呈现)。但是,我不确定在哪里实际包含它。在构造函数中调用它,或者render()中的某个地方,或者我没有考虑过的其他地方,会更好吗?

1 个答案:

答案 0 :(得分:3)

最好让你成为你所在州的一部分,例如

class Parent extends React.Component {
  constructor(){
    super();
    this._eKeyPress = this._eKeyPress.bind(this);
    this.state.showChild = false;
  }
  componentDidMount(){
    Mousetrap.bind('e', this._eKeyPress);
  }
  componentWillUnmount(){
    Mousetrap.unbind('e', this._eKeyPress);
  }
  _eKeyPress(){
    this.setState({showChild: true});
  }

  render(){
    return <Child show={this.state.showChild} />;
  }
}

之后的下一个问题是你是否需要创建孩子,因为你也可以

render(){
  return this.state.showChild ? <Child /> : null;
}