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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.