😏
【React Native】子コンポーネントから親コンポーネントのStateを更新する
どうも〜つぶあんです。
React Nativeで親コンポーネントから子コンポーネントに値を受け渡すのはわかりやすいけどその逆の子から親コンポーネントのStateを更新する方法がわからなかったので、自分用にメモ書き。
記述例
親コンポーネント(Parent)、子コンポーネント(Child)を作成し、以下のように記述。
Parent.js
import { Text, View } from 'react-native'
import React, { useState } from 'react'
import Child from './components/Child';
const Parent = () => {
const [text, setText] = useState("");
return (
<View>
<Child setText={setText} />
<Text>{text}</Text>
</View>
)
}
export default Parent
Child.js
import { Text, View } from 'react-native'
import React from 'react'
const Child = (props) => {
return (
<View>
<Text>{props.setText("つぶあん")}</Text>
</View>
)
}
export default Child
解説
親のState関数(setText
)を以下のように子に渡し、
<Child setText={setText} />
子で受け取ったsetText
を使って値を更新することで、
props.setText("つぶあん")
子コンポーネントから親コンポーネントのStateを更新できます。
なるほどねー。
Discussion