学习笔记jira项目6-渲染列表和下拉框

简介: 学习笔记jira项目6-渲染列表和下拉框
const SearchList = ({ lists, users }) =>
{
  return (
    <table>
      <thead>
        <tr>
          <th>项目</th>
          <th>负责人</th>
        </tr>
      </thead>
      <tbody>
        {
          lists.map(project =>
            <tr>
              <td>{project.name}</td>
              <td>{users.find(user => user.id === project.personId)?.name}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}
export default SearchList

渲染列表

const SearchPannel = ({ users, param, setParam }) =>
{
  return (
    <form>
      <div>
        <input type="text" value={param.name} onChange={evt => setParam({
          ...param,
          name: evt.target.value
        })} />
        <select value={param.personId} onChange={evt => setParam({
          ...param,
          personId: evt.target.value
        })}>
          <option value={''}>负责人</option>
          {
            users.map(user => <option key={user.id} value={user.id}>{user.name}</option>)
          }
        </select>
      </div>
    </form>
  )
}
export default SearchPannel
相关文章
|
JavaScript
fastadmin表格列表内部自定义按钮
fastadmin表格列表内部自定义按钮
377 0
fastadmin表格列表内部自定义按钮
|
数据处理 网络架构
ElementUI - 主页面--动态树&右侧内容管理
ElementUI - 主页面--动态树&右侧内容管理
81 0
|
JavaScript
fastadmin如何在列表的操作中添加其他按钮
fastadmin如何在列表的操作中添加其他按钮
247 0
|
JavaScript
fastadmin如何自定义一个列表上的按钮。
fastadmin如何自定义一个列表上的按钮。
343 0
jira学习案例112-拖拽实现1
jira学习案例112-拖拽实现1
65 0
jira学习案例112-拖拽实现1
jira学习案例113-拖拽实现2
jira学习案例113-拖拽实现2
76 0
jira学习案例113-拖拽实现2
jira学习案例114-拖拽实现3
jira学习案例114-拖拽实现3
62 0
jira学习案例114-拖拽实现3
|
开发工具 芯片 开发者
2.1工作空间及组件:组件界面操作演示|学习笔记
快速学习2.1工作空间及组件:组件界面操作演示
2.1工作空间及组件:组件界面操作演示|学习笔记
学习笔记jira项目5-用jsx列表渲染开发下拉框组件
学习笔记jira项目5-用jsx列表渲染开发下拉框组件
96 0
学习笔记jira项目5-用jsx列表渲染开发下拉框组件
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)
123 0
jira项目笔记9-封装输入框和下拉框组件(不用ant之前)