javascript - 将参数 onClick 传递给通过 refs 执行的 props.function()

Question

很抱歉，这个标题可能有点让人头疼，我只是想不出如何准确地表达我的问题(欢迎任何建议)。

基本上有 3 个组成部分:parent , ChildA , 和 ChildB

Parent渲染两个 child ，ChildB有一个 ref 标签，Parent使用该 ref 标签传递 ChildB的功能ChildA .

class Parent extends Component {
  render() {
    <ChildA openChildB={() => this.childb.open()} />
    <ChildB ref={instance => { this.childb = instance; }} />
  }
}

非常基础。

我遇到的问题是当ChildA执行它需要传递参数的函数。我似乎无法找出正确的方法。

我尝试使用不同的语法将函数传递给 ChildA - <ChildA openChildB={this.childb.open} />

但这会导致错误，Can't Read Property Of Undefined .

如何通过此函数传递变量？任何帮助将不胜感激!

编辑:我知道我可以将参数传递到 Parent然后从那里把它放在函数 () => this.childb.open(arg) 中但为了组织起见，我真的更愿意在 ChildA 内处理所有这些.

Answer 1

您可以使用以下内容:

class Parent extends Component {
  render() {
    <ChildA openChildB={(arg1) => this.childb.open(arg1)} />
    <ChildB ref={instance => { this.childb = instance; }} />
  }
}

在 ChildA 中，您应该确保在调用 this.props.openChildB 时传递相关参数:

function handleOpenOnB() {
    // This is an example, you should use the relevant value you want to pass to the openChildB function
    this.props.openChildB(this.state.val);
}