如何在React JS中的表格单元格内嵌入一个动态Dropdown菜单？

Question

我有一个有4列的动态表。我想让第四列成为一个动态下拉列表，用户应该能够在其中更改值。

为了创建一个动态表，我按照下面的教程进行了操作。

https:/blog.logrocket.com完整指南--构建-智能数据表-反应。

我是React的新手。

这就是我需要的表格。对不起，内容模糊了。

Answer 1

看这个例子。

表.Js

import React, { Component } from 'react'

      class Table extends Component {
           constructor(props) {
              super(props) 
              this.state = {
                 students: [
                    { id: 1, name: 'Wasif', age: 21, email: '[email protected]' },
                    { id: 2, name: 'Ali', age: 19, email: '[email protected]' },
                    { id: 3, name: 'Saad', age: 16, email: '[email protected]' },
                    { id: 4, name: 'Asad', age: 25, email: '[email protected]' }
                 ]
              }
           }

           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>
                 )
              })
           }

结果 :