javascript - 将 this.props.functionName() 的结果传回父级

Question

在 React JS 中我有 2 个文件:

文件 1:Chat.js

该文件调用大量自定义组件，并为它们提供自定义函数作为 props。

文件 2:PreviewChatBox.js

此文件显示多个聊天的预览。当我调用从 chat.js 发送的函数(加载 Chat)时，它将 Chat.js 中的状态更改为来自预览聊天组件之一的整数。

我需要能够访问 Chat.js 中的该组件，但我似乎无法将变量传递回来。

代码:

文件 1:Chat.js

render(){
  return(
    <PreviewChatBox onClicked={() => this.previewClicked()}/>
)}

文件 2:PreviewChatBox.js

 <div onClick={() => this.props.onClicked()} key={value}> 
     <p> {element[0]}{element[1]}{element[2]} </p>
 </div>

所以我可以毫无问题地调用该方法，但无法将 key 传递回 chat.js

Answer 1

您考虑过使用回调函数吗？

聊天.js

<PreviewChatBox 
     onClicked={() => this.previewClicked()} 
     updateKey((newKey) => this.setState({newKey}) />

现在您的子组件应该能够通过从 props 访问 updateKey 函数来更新 Chat.js 的状态。