<Select>①の値を変えたら<Select>②も対応した値に変える方法
解決したいこと
左が番号で右が名前を選ぶSelectコンポーネントだとします。（Selectコンポーネントはantdのもの）
例えば、左が二番が選ばれると右には二番のID を持つ人の名前が自動で入るようにするにはどのようにすればよいでしょうか？
どなたか分かる方がいらっしゃいましたら教えてほしいです。
該当するソースコード
import { Select } from "antd"
import { connect } from "react-redux"
import { useState } from "react"
const { Option } = Select
function TantoInput({ tanto }) {
return (
<>
<Select
style={{width: 60}}>
{tanto.map((tanto) => (
<Option key={tanto.id} value={tanto.id}></Option>
))}
</Select>
<Select style={{width: 150}}>
{tanto.map((tanto) => (
<Option key={tanto.id} value={tanto.name}></Option>
))}
</Select>
</>
)
}
const mapStateToProps = (state) => {
return {tanto: state.tanto}
}
export default connect(mapStateToProps)(TantoInput)
//store.js
tanto: [
{ id: 1, name: "田中", },
{ id: 2, name: "佐藤", },
{ id: 3, name: "鈴木", },
]
1 likes
