私は2つのファイルを持っているでは、JSを反応させるの親

Question

にthis.props.functionName（）の結果をバック渡します彼らは小道具としてのカスタム機能を備えています。

ファイル2：PreviewChatBox.js

このファイルには、複数のチャットのプレビューが表示されます。 chat.js（チャットの読み込み）から送信された関数を呼び出すと、Chat.jsの状態がプレビューチャットコンポーネントの1つの整数に変更されます。

私は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> 

だから私はどんなことなく、メソッドを呼び出すことができます問題はありますが、チャットに鍵を戻すことはできません.js

Answer 1

コールバック関数を使用しましたか？

Chat.js

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

今すぐあなたの子コンポーネントは小道具からupdateKey機能にアクセスすることによりChat.jsの状態を更新することができるはずです。

Answer 2

これはあなたのユースケースに合っていますが、矢印機能を使用せずに直接PreviewChatBox.jsのonClickビヘイビアに直接渡すと、Chat.js内でpreviewClickedメソッドを参照することでこれを取得できます。

ファイル1：Chat.js

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

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

がファイル2：PreviewChatBox.js

const element = ['abc','def','ghi']; 
const value = 2; 

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