[英]How to call handler function from a child of a child component (ReactJS)
I'm wondering what is the best way of doing this.我想知道这样做的最佳方法是什么。
I have 3 components, App, String and Note.我有 3 个组件,App、String 和 Note。 Before I was creating Note elements in App like this:
在我像这样在 App 中创建 Note 元素之前:
<Note
state={this.state.btnStates[i]}
onClick={() => this.handleClick(i)}
/>
and it was working like charm (handleClick is of course in the most parent component - App)它就像魅力一样工作(handleClick当然在最父组件 - 应用程序中)
but now I want to transfer note creation to the String component, I thought that would be easy but what I thought to work just doesn't.但现在我想将笔记创建转移到 String 组件,我认为这很容易,但我认为可行的事情却没有。 I'm doing it like this: in App component i render String:
我是这样做的:在 App 组件中,我呈现字符串:
<String
btnStates={this.state.btnStates}
onClick={(i) => this.handleClick(i)}
></String>
in String component:在字符串组件中:
for (var i = 0; i < stringLength; i++) {
notes.push(
<Note
key={i}
onClick={keyFromNoteCall => this.props.onClick(keyFromNoteCall)}
state={this.props.btnStates[i]}
></Note>
);
}
and in Note component:并在 Note 组件中:
<input
type="button"
className={this.getClassName(this.props.state)}
onClick={() => this.props.onClick(this.props.key)}
value={this.props.value}
disabled={this.isDisabled()}
/>
What is the React way of doing such things? React 做这些事情的方式是什么? I need the logic to be handled in the App, but I would like move the rendering of Notes in a loop to another component.
我需要在应用程序中处理逻辑,但我想将 Notes 的渲染循环移动到另一个组件。
*UPDATE: it turned out the problem was "key" property as it can't be accessed with {this.props.key}
I created another property "id" for that purpose and it works. *更新:事实证明问题是“key”属性,因为它无法使用
{this.props.key}
访问我{this.props.key}
创建了另一个属性“id”并且它有效。 I have another problem now, that even after binding in App constructor, this
logged in handleClick function doesn't show App component but rather the Note itself :/我现在有另一个问题,即使在 App 构造函数中绑定之后,
this
登录的 handleClick 函数也不会显示 App 组件,而是显示 Note 本身:/
Without using a state handler like Context or Redux, the React way of doing it is passing the function as props.在不使用 Context 或 Redux 之类的状态处理程序的情况下,React 的做法是将函数作为 props 传递。
App.js应用程序.js
<String
btnStates={this.state.btnStates}
handleClick={this.handleClick}
/>
String component字符串组件
for (var i = 0; i < stringLength; i++) {
notes.push(
<Note
key={i}
handleClick={this.props.handleClick}
state={this.props.btnStates[i]}
></Note>
);
}
Note component音符组件
<input
type="button"
className={this.getClassName(this.props.state)}
onClick={() => this.props.handleClick(this.props.key)}
value={this.props.value}
disabled={this.isDisabled()}
/>
Also I recommend you that in your String component you do a .map() instead of a for loop.此外,我建议您在 String 组件中使用 .map() 而不是 for 循环。
notes.map(note =>
<Note key={note.id}
handleClick={this.props.handleClick}
state={note.btnStates}
)
This way you would have to refactor to have IDs on your notes but you should do it because using indexes as keys can cause problems.这样你就必须重构以在你的笔记上有 ID,但你应该这样做,因为使用索引作为键可能会导致问题。
If I understood you correctly, you should change onClick in App to this and that should do it.如果我理解正确,您应该将应用程序中的 onClick 更改为 this 并且应该这样做。
<String
btnStates={this.state.btnStates}
onClick={this.handleClick}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.