配列をループして、配列clicked内のクリックされたアイテムのIDの状態に設定している親コンポーネントがあります。
この状態にアクセスする必要がある他の場所でこのコンポーネントを使用しています。この状態をどのように受け継ぐことができますか？
これが私のループです：
{
filteredArray.map(link => {
return (
<div
key={link.id}
role="button"
style={{paddingBottom: 20}}
onClick={this.changeView(link.id)}
onKeyPress={() => {}}
tabIndex={0}
>
<Paragraph size="large">
<a className='heading__dropdown__link'>
{link.label}
</a>
</Paragraph>
</div>
)
})
}
これが私が状態を設定している私の関数です clicked
changeView(id) {
return (
() => this.setState({clicked: id})
)
}
そして、ここで上記のコンポーネントを使用しています。ここで上記の状態を使用するにはどうすればよいですか？
<HeadingDropdown
expandedTitle="Change view"
links={links}
heading={currentLocation}
/>
あなたの最後のコメントを処理します。HeadingDropdownで小道具として使用する関数を渡した場合は、それを使用して、その状態値を親に戻すことができます。
親で定義された関数
class Parent extends React.Component{
state = {
headingDropdownvalues: {}
}
getHeadingDropdownState = (valueFromChild) => {
this.setState({
headingDropdownvalues: valueFromChild
})
}
render(){
<HeadingDropdown passupstate={this.getHeadingDropdownState}/>
}
}
これで、HeadingDropdownからの状態値を消費するように親コンポーネントが設定されました。
次に、クリック後にその値を実際に渡すようにHeadingDropdownを構成する必要があります。
HeadingComponentでは、状態が設定された後、渡された小道具を呼び出すようにchangeViewメソッドを更新する必要があります。this.setState()これは、コールバックである2番目の引数を利用して行います。
changeView(id) {
return (
() => this.setState({
clicked: id
}, () => this.props.passupstate(this.state)) //right here you can pass in whatever you want
)
}
また、これがどのように機能するかを確認するためのサンドボックスです：https：//codesandbox.io/s/jovial-thompson-ldg3n
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加