[英]How to display data to the inputs when the specific table row is clicked
I am new in React and I would like to know how can I do that When I click the button in a specific row in the table I will get that specific data for that row and get it displayed in the input fields in the same form where you can add that data to the table.我是 React 的新手,我想知道我该怎么做您可以将该数据添加到表中。
I hope that my question makes sense.我希望我的问题是有道理的。 Thank you for every answer:)
谢谢你的每一个回答:)
The way you would do this completely depends on your table component and form handling.您执行此操作的方式完全取决于您的表格组件和表单处理。 Are you using HTML forms and using state to manage your own form?
您是否使用 HTML forms 并使用 state 来管理自己的表单? Are you using
formik
?.你在使用
formik
吗? Assuming you're dynamically generating the table rows with plain table components, you could do something like the following to give the button in each row access to the data in the row when clicked.假设您正在使用普通表格组件动态生成表格行,您可以执行以下操作以使每行中的按钮在单击时访问该行中的数据。
const data = [
{ name: 'Joe Shmoe', age: 25 },
{ name: 'Sarah Silverman', age: 40 },
{ name: 'Ronald Lee', age: 10 },
];
const Table = () => {
return (
<table>
<tbody>
{data.map(d => (
<tr>
<td>{d.name}</td>
<td>{d.age}</td>
<button onClick={() => alert(d)}>Click me</button>
</tr>
))}
</tbody>
</table>
)
};
If you could share your code, I get more understanding of your question.如果您可以分享您的代码,我会更了解您的问题。 Answer of your question according to my observation:
根据我的观察回答你的问题:
Make one state that will store your selected row.制作一个 state 来存储您选择的行。 Set this state with row's data when user click on the button.
当用户单击按钮时,将此 state 设置为行的数据。
And use that state in input's value tag.并在输入的值标签中使用该 state 。 Like this:
像这样:
<input value={state.name} ...other_attributes />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.