如何在 React JS 的 table 单元格中嵌入动态下拉菜单?
How do I embed a dynamic Dropdown menu inside a table cell in React JS?
我有一个包含 4 列的动态 table。我想让第四列成为一个动态下拉列表,用户应该可以在其中更改值。
为了创建动态 table 我已经按照以下教程进行操作。
https://blog.logrocket.com/complete-guide-building-smart-data-table-react/
我是 React 的新手。
这就是我需要 table 的方式。抱歉模糊了内容。
看这个例子:
Table.Js
import React, { Component } from 'react'
class Table extends Component {
constructor(props) {
super(props)
this.state = {
students: [
{ id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
{ id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
{ id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
{ id: 4, name: 'Asad', age: 25, email: 'asad@email.com' }
]
}
}
viewRow(id,e) {
alert('selectedId:'+ id);
localStorage.setItem('transactionId',id);
}
renderTableData() {
return this.state.students.map((student, index) => {
const { id, name, age, email } = student //destructuring
return (
<tr key={id}>
<td>{id}</td>
<td>{name}</td>
<td>{age}</td>
<td>{email}</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td><button onClick={(e) => this.viewRow(id, e)}>View Row Id</button></td>
</tr>
)
})
}
结果:
我有一个包含 4 列的动态 table。我想让第四列成为一个动态下拉列表,用户应该可以在其中更改值。
为了创建动态 table 我已经按照以下教程进行操作。
https://blog.logrocket.com/complete-guide-building-smart-data-table-react/
我是 React 的新手。
这就是我需要 table 的方式。抱歉模糊了内容。
看这个例子:
Table.Js
import React, { Component } from 'react'
class Table extends Component {
constructor(props) {
super(props)
this.state = {
students: [
{ id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
{ id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
{ id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
{ id: 4, name: 'Asad', age: 25, email: 'asad@email.com' }
]
}
}
viewRow(id,e) {
alert('selectedId:'+ id);
localStorage.setItem('transactionId',id);
}
renderTableData() {
return this.state.students.map((student, index) => {
const { id, name, age, email } = student //destructuring
return (
<tr key={id}>
<td>{id}</td>
<td>{name}</td>
<td>{age}</td>
<td>{email}</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td><button onClick={(e) => this.viewRow(id, e)}>View Row Id</button></td>
</tr>
)
})
}
结果: