Question

在React JS中我有2个文件：

文件1：Chat.js

此文件调用许多自定义组件，并为其提供自定义函数作为道具。

文件2：PreviewChatBox.js

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

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

CODE：

文件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>

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

Answer 1

您是否考虑过使用回调函数？

Chat.js

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

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

Answer 2

希望这有助于匹配您的用例，但我可以通过直接在Chat.js中引用previewClicked方法而不使用箭头函数并将密钥直接传递给PreviewChatBox.js中的onClick行为来实现此功能

文件1：Chat.js

this.test= false;
setTimeout(() => {
    this.test= true;
}, 1000);

文件2：PreviewChatBox.js

previewClicked = (val) => {
    console.log(val);
};

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

将this.props.functionName（）的结果传回父级

2 个答案: