[英]How to call handler function from a child of a child component (ReactJS)
我想知道这样做的最佳方法是什么。
我有 3 个组件,App、String 和 Note。 在我像这样在 App 中创建 Note 元素之前:
<Note
state={this.state.btnStates[i]}
onClick={() => this.handleClick(i)}
/>
它就像魅力一样工作(handleClick当然在最父组件 - 应用程序中)
但现在我想将笔记创建转移到 String 组件,我认为这很容易,但我认为可行的事情却没有。 我是这样做的:在 App 组件中,我呈现字符串:
<String
btnStates={this.state.btnStates}
onClick={(i) => this.handleClick(i)}
></String>
在字符串组件中:
for (var i = 0; i < stringLength; i++) {
notes.push(
<Note
key={i}
onClick={keyFromNoteCall => this.props.onClick(keyFromNoteCall)}
state={this.props.btnStates[i]}
></Note>
);
}
并在 Note 组件中:
<input
type="button"
className={this.getClassName(this.props.state)}
onClick={() => this.props.onClick(this.props.key)}
value={this.props.value}
disabled={this.isDisabled()}
/>
React 做这些事情的方式是什么? 我需要在应用程序中处理逻辑,但我想将 Notes 的渲染循环移动到另一个组件。
*更新:事实证明问题是“key”属性,因为它无法使用{this.props.key}
访问我{this.props.key}
创建了另一个属性“id”并且它有效。 我现在有另一个问题,即使在 App 构造函数中绑定之后, this
登录的 handleClick 函数也不会显示 App 组件,而是显示 Note 本身:/
在不使用 Context 或 Redux 之类的状态处理程序的情况下,React 的做法是将函数作为 props 传递。
应用程序.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()}
/>
此外,我建议您在 String 组件中使用 .map() 而不是 for 循环。
notes.map(note =>
<Note key={note.id}
handleClick={this.props.handleClick}
state={note.btnStates}
)
这样你就必须重构以在你的笔记上有 ID,但你应该这样做,因为使用索引作为键可能会导致问题。
如果我理解正确,您应该将应用程序中的 onClick 更改为 this 并且应该这样做。
<String
btnStates={this.state.btnStates}
onClick={this.handleClick}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.