从反应中的地图功能获取输入

Question

我试图不仅显示一个表格，而且还从那里更新，所以我尝试使用实际值设置一个占位符，现在我不知道当用户单击该行的更新按钮时如何提取该输入字段。

<tbody>
    {machines.map((machine) => ( <tr key={machine._id}>
    <td> <input type="text" id={`${machine._id}.tension`} placeholder={machine.tension}/> </td>
    <td><button type="button" onClick={()=> console.log(`${machine._id}.tension`)} className="btn btn-success btn-rounded btn-sm">Guardar</button></td>
    </tr>))
    }
</tbody>

我不确定我是否应该更新状态或如何更新状态，因为它来自地图功能:(

如果您能指导我，请不胜感激

Answer 1

我建议您将行元素提取到它自己的组件中，并且当您映射机器时，您的输出将是带有机器属性的行元素，例如，您可以单独处理这些元素状态以进行更新之类的