Javascript 如何从子组件（ReactJS）的子组件调用处理程序函数

我想知道做这件事最好的方法是什么

我有3个组件，应用程序、字符串和注释。在我在应用程序中创建注释元素之前，如下所示：

<Note
          state={this.state.btnStates[i]}
          onClick={() => this.handleClick(i)}
        /> 

this.handleClick（i）}
/> 

而且它工作起来很有魅力（handleClick当然是最主要的组件-应用程序）

但是现在我想把音符创建转移到String组件，我认为这很容易，但我认为有效的方法却不可行。我是这样做的： 应用程序内组件i渲染字符串：

          <String
            btnStates={this.state.btnStates}
            onClick={(i) => this.handleClick(i)}
          ></String>

this.handleClick（i）}
>

字符串中的组件：

    for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          onClick={keyFromNoteCall => this.props.onClick(keyFromNoteCall)}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

      <input
        type="button"
        className={this.getClassName(this.props.state)}
        onClick={() => this.props.onClick(this.props.key)}
        value={this.props.value}
        disabled={this.isDisabled()}
      />

for（变量i=0；i
);
}

并在附注部分：

    for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          onClick={keyFromNoteCall => this.props.onClick(keyFromNoteCall)}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

      <input
        type="button"
        className={this.getClassName(this.props.state)}
        onClick={() => this.props.onClick(this.props.key)}
        value={this.props.value}
        disabled={this.isDisabled()}
      />

this.props.onClick（this.props.key）}
value={this.props.value}
disabled={this.isDisabled（）}
/>

做这些事情的方法是什么？我需要在应用程序中处理逻辑，但我想将循环中注释的呈现移动到另一个组件

---

*更新：原来问题出在“key”属性上，因为无法使用

{this.props.key}

访问它。我为此创建了另一个属性“id”，它可以正常工作。我现在还有另一个问题，即使在绑定了应用程序构造函数之后，

这个

登录的handleClick函数并没有显示应用程序组件，而是显示了注释本身：/

如果我理解正确，你应该将应用程序中的onClick更改为这个，这样就可以了

---

在不使用诸如上下文或Redux之类的状态处理程序的情况下，React的方法是将函数作为道具传递

App.js

<String
    btnStates={this.state.btnStates}
    handleClick={this.handleClick}
/> 

字符串组件

for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          handleClick={this.props.handleClick}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

<input
    type="button"
    className={this.getClassName(this.props.state)}
    onClick={() => this.props.handleClick(this.props.key)}
    value={this.props.value}
    disabled={this.isDisabled()}
  />

for（变量i=0；i

注释组件

for (var i = 0; i < stringLength; i++) {
      notes.push(
        <Note
          key={i}
          handleClick={this.props.handleClick}
          state={this.props.btnStates[i]}
        ></Note>
      );
    }

<input
    type="button"
    className={this.getClassName(this.props.state)}
    onClick={() => this.props.handleClick(this.props.key)}
    value={this.props.value}
    disabled={this.isDisabled()}
  />

this.props.handleClick（this.props.key）}
value={this.props.value}
disabled={this.isDisabled（）}
/>

我还建议您在字符串组件中使用.map（）而不是for循环

notes.map(note => 
    <Note key={note.id} 
    handleClick={this.props.handleClick}
    state={note.btnStates}
)

notes.map（note=>
不知怎的，它对我不起作用，你介意分享一个完整的基本代码的例子吗？*我已经更新了主要的帖子，以及我在这方面取得的进展。你能分享你的存储库吗？这是一个我如何尝试重新创建这个问题的例子。所以这是我在普通示例中创建它的基本方式，我已经完成了这里也有同样的问题。