在 ReactJS 中为列表设置默认值

Question

我正在尝试使用 useEffect 将默认值设置为数据列表。试图用 setSelectedEmployee(employees[0].id);

设置它（第 16 行）

我也尝试（第 64 行）设置默认值，但没有成功。

value={employees[0].name}

这是工作示例： https://codesandbox.io/s/prefill-list-73c4sd

非常感谢任何帮助。

Answer 1

我相信这就是您要找的：

https://codesandbox.io/s/prefill-list-forked-hqowhz?file=/src/App.js

我们做了什么：我们添加了一个单独的 useEffect 挂钩，它依赖于 employees。每次 employees 更改时，它会取第一个值并设置名称。您的过滤方法使用了名称，所以我就是这样构造它的。

代码（此处）：

import React, { useState, useEffect } from "react";
import DataService from "./services/DataService";
import "./styles.css";
import "antd/dist/antd.css";
import { Modal, Button } from "antd";

export default function App() {
  const [employees, setEmployees] = useState([]);
  const [selectedEmployee, setSelectedEmployee] = useState("");

  const [isModalVisible, setIsModalVisible] = useState(false);

  useEffect(() => {
    DataService.getUsersData().then((res) => {
      setEmployees(res.data);
      //setSelectedEmployee(employees[0].id);
    });
  }, []);

  useEffect(() => {
    // We can set the first one as selected here
    employees.length && setSelectedEmployee(employees[0]?.name);
  }, [employees]);

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

  const clear = (event) => {
    event.target.value = "";
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

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

  //console.log(selectedEmployee, selectedEmployeeId);
  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}
                onClick={clear}
                onFocus={clear}
                value={selectedEmployee}
              ></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" defaultValue={selectedEmployeeId}></input>
            </td>
          </tr>
        </tbody>
      </table>
      <Button type="primary" onClick={showModal}>
        Open modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Chosen Employee ID {selectedEmployeeId}</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  );
}

在 ReactJS 中为列表设置默认值

Set default value for list in ReactJS

default

datalist

reactjs