Reactjs React-在更改时传递多个选项参数/值

我有一个组件由它的父级渲染。有一个选择字段，其中包含一组映射的

选项

，这些选项基于作为道具传递的内容。我想将要在返回选项中映射的对象的

id

以及

名称

传递回父对象。。。见下文

let availableProgramNames = props.program_names.map(p => {
    return(
      <option one={p.id} two={p.name} className="universal-program-name">{p.name}</option>
    )
  })

---

我个人会在父组件中处理此逻辑，但您也可以为onChange事件创建回调函数，该事件根据控件的值查找所选选项

const选项=[
{id:1，名称：'bill'}，
{id:2，名字：'sally'}，
]
常数handleChange=（e）=>{
const selectedOption=options.find（option=>option.id===+e.target.value）；
道具.手柄名称更改（选择选项）；
}
返回(
{options.map（（选项，键）=>(
{option.name}
))}
);这里是一种不同的方法


类应用程序扩展了React.Component{
状态={
程序名称：[
{id:1，名称：“foo”}，
{id:2，名称：“bar”}，
],
}
availableProgramNames=this.state.program\u names.map（p=>{
返回(
{p.name}
)
})
handleNameChange=（e）=>{
const{selectedIndex}=e.target.options；
const{program_names}=this.state；
const{name，id}=程序名[selectedIndex-1]；
console.log（名称、id）；
}
render（）{
返回(
请选择一个名字
{this.availableProgramNames}
);
}
}
render（，document.getElementById（“根”））
如果没有问题，您能否提供所有组件作为一个整体？
<select value={props.new_program.name} onChange={props.handleNameChange}>
              <option selected>Please Choose a Name</option>
              {availableProgramNames}
            </select>