ReactJS：从数据列表中获取 ID

Question

我正在处理这个问题 - 如何从 ReactJS 中的动态数据列表中获取所选项目的员工 ID。

const URL = "https://jsonplaceholder.typicode.com/users";
const [employees, setEmployees] = useState([]);

const getData = async () => {
   const response = await axios.get(URL);
   setEmployees(response.data);
};

useEffect(() => {
  getData();
}, []);

const handleChange = (event) => {
 console.log(event.target.value);
};



<input id="employeeName"
   list="listOfEmployees"
   onChange={handleChange}
></input>

<datalist id="listOfEmployees">
   {employees && employees.length > 0 ? (
   employees.map((result) => {
    return (
    <option key={result.id} value={result.name}> {result.name}</option>
          );
          })
       ) : (
        <div>Data loading in progress...</div>
         )}
 </datalist> 

在这里，我使用此场景创建了示例应用程序： https://codesandbox.io/s/get-id-from-datalist-pcghn

几年前，用户 Dominik 回答了类似的问题，但我不知道如何将整个对象（在本例中为 employee）返回到 handleChange 函数以获取 ID。 Get Id of selected item in datalist

任何帮助将不胜感激。 提前致谢。

Answer 1

由于我们需要根据所选员工自动填充员工 id 的值，因此您需要有一个状态来保存所选员工的值。

const [selectedEmployee, setSelectedEmployee] = useState("");

现在将此状态传递给输入，使其成为受控组件。

 <input
     id="employeeName"
     list="listOfEmployees"
     onChange={handleChange}
     value={selectedEmployee}
  />

当我们在输入中选择或更改某些内容时，将员工设置为状态。

 const handleChange = (event) => {
    setSelectedEmployee(event.target.value);
  };

现在，当您在下拉列表中选择员工时，我们的状态中就有 selectedEmployee 的姓名。

一旦我们有了员工姓名，我们就可以找到 id。

const selectedEmployeeId =
    selectedEmployee.trim().length > 0
      ? employees.find((employee) => employee.name === selectedEmployee)?.id ||
        ""
      : "";

现在将这个 selectedEmployee Id 传递给您的第二个输入的默认值属性。

<td>
    <input id="employeeId" defaultValue={selectedEmployeeId}></input>
</td>

工作沙盒

https://codesandbox.io/s/get-id-from-datalist-forked-gzrom?file=/src/App.js

Answer 2

首先你必须为你选择的员工创建一个新的状态，然后你只需要像这样在你的 handleChange 中找到：

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const URL = "https://jsonplaceholder.typicode.com/users";
  const [employees, setEmployees] = useState([]);
  const [employee, setEmployee] = useState({});

  const getData = async () => {
    const response = await axios.get(URL);
    setEmployees(response.data);
    console.log(response.data)
  };

  useEffect(() => {
    getData();
  }, []);

  const handleChange = (event) => {
    setEmployee(employees.find(e => e.name === event.target.value))
  };

  return (
    <div className="App">
      <h1>Choose Employee From List</h1>

      <table id="tblEmployees">
        <tbody>
          <tr>
            <td>
              <label htmlFor="employeeName"> Employee Name</label>
            </td>
            <td>
              <input
                id="employeeName"
                list="listOfEmployees"
                onChange={handleChange}
              ></input>
              <datalist id="listOfEmployees">
                {employees && employees.length > 0 ? (
                  employees.map((employee) => {
                    return (
                      <option key={employee.id} value={employee.name}>
                        {employee.name}
                      </option>
                    );
                  })
                ) : (
                  <div>Data loading in progress...</div>
                )}
              </datalist>
            </td>
          </tr>

          <tr>
            <td>
              <label htmlFor="employeeId"> Employee ID</label>
            </td>
            <td>
              <input id="employeeId" value={employee ? employee.id : ''}/>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

在您的输入中，只需添加您刚刚选择的员工 ID 的值。

Answer 3

由于您有存储在 state 中的员工列表，您可以在您的 handleChange 中执行 employees.find(emp => emp.name === event.target.value)。

如果你只需要id，为什么不将选项的label设置为employee.name，并将值设置为employee.id？这样您就不必每次选择时都执行 N 运行时的操作