Question

我可能会问错误的问题，但是我希望能够在从子函数调用时执行父函数，而不是事件。

我有更多或更少的以下设置：声明父级中的_foo方法并将其传递给ChildTwo，其中通过onClick事件处理程序执行它按预期工作。但是，我遇到了一种情况，我需要从另一个方法中手动调用_foo方法（我在这里简化了它，但它将被有条件地调用）。

我的问题是从_bar（）调用_foo方法需要做什么？

提前致谢！

＆＃13;

export defaultclass Parent extends Component {
  constructor() {
    super();
  }

  _foo() {
    alert('alert!');
  }

  render() { <ChildOne _foo={this._foo.bind(this)} /> }
}

const ChildOne = (props) => {
  const { _foo } = props;
  return ( <ChildTwo _foo={_foo} /> );
}

export default class ChildTwo extends Component {
  constructor(props) {
    super(props);
    this._foo = this.props._foo.bind(this);
  }

  _bar() {
    //this._foo.call();
    //this._foo();
    //what do I do here?
  }

  render() {
      return (
        <div>
          <button onClick={this._foo}> Works! </button>
          <button onClick={this._bar}>Doesnt Work!</button>
        </div>
      );
  }
};

＆＃13;

Answer 1

如果你真的想这样做，那么我会通过将子组件作为参数传递给仍然绑定到原始父级的方法来解决它。

例如：

export defaultclass Parent extends Component {
  constructor() {
    super();
    this._foo = this._foo.bind(this)
  }

  _foo(childComponent) {
    alert({ parent: this, child: childComponent });
  }

  render() { <ChildOne _foo={this._foo} /> }
}

const ChildOne = (props) => {
  const { _foo } = props;
  return ( <ChildTwo _foo={_foo} /> );
}

export default class ChildTwo extends Component {
  constructor(props) {
    super(props);
    this._bar = this._bar.bind(this);
  }

  _bar() {
    const { _foo } = this.props;

    // Passing a reference to self as argument
    _foo(this);
  }

  render() {
      return (
        <div>
          <button onClick={this._bar}>Should Work Now!</button>
        </div>
      );
  }
};

如何在React中的事件处理程序之外执行绑定函数？

1 个答案: