ReactJS -更新组件(从列表生成)在同一个div

Question

这是一个基本的问题，但我搜索了一个指南，没有成功…

我想有一个下拉列表和输入，每个下拉列表会改变它旁边的输入。

var list = [{ name: "foo1"}, {name: "foo2"}];

return (
{list.map( (name) => {
return (<div>
<dropdown data={someData} 
onChange={(ev) => {
if(ev.value == 'clearIt') 
<CHANGE THE NEAR INPUT VALUE>
}
}/>
<input value={name.name} />
</div>)
})});

我不想使用DOM或ref，因为我知道最好避免使用它。

有什么建议吗?或者裁判是唯一的选择?

感谢

Answer 1

可以通过以下步骤实现:

• 创建一个新组件，并将下拉菜单和输入移动到这个新组件。
• 按照下面的例子给你的组件添加状态:https://reactjs.org/docs/state-and-lifecycle.html adding-local-state-to-a-class
在下拉列表中添加一个事件监听器onChange和一个事件处理程序，它可以更新你在第一步中创建的状态。(记住要在构造函数中绑定处理程序。
• 将新组件添加到您给出的示例的div元素中，并将所需的相关数据传递给您创建的新组件。

这应该允许您只更新下拉列表旁边的输入。它还允许您为创建的每个下拉菜单提供不同的数据。