0

Mousetrapライブラリを使用して、React の別のコンポーネントから 1 つの関数を呼び出そうとしています。

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()コンストラクター、または のどこか、または私が考慮していない他の場所でそれを呼び出す方が良いでしょうか?

4

1 に答える 1

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;
}
于 2015-07-16T03:24:25.920 に答える