在 React 中的表单值中仅插入唯一 ID

Question

我是 React 新手，应用程序中有两个输入字段，一个是 ID，另一个是 Name，我使用过两个组件，在父组件中我维护了所有的状态和表单分离另一个组件。我的目的是检查作为用户输入的 id，id 每次都应该是唯一的，如果相同，则应弹出警报并将焦点转到 ID 输入字段，并且应该这样做直到 ID 不同从所有对象（状态对象）

我的 app.js 文件是，

import React, { Component } from "react";
import Form from "./Form";
export default class App extends Component {
  state = {
    names: [
      /*
        {id: 1,name: "Aashiq"}
        */
    ],
  };

  renderTable() {
    return this.state.names.map((eachName) => {
      const { id, name } = eachName;
      return (
        <tr key={id}>
          <td>{id}</td>
          <td>{name}</td>
          <td>
            <input
              type="button"
              value="Delete"
              onClick={() => this.deleteName(eachName.id)}
            />
          </td>
        </tr>
      );
    });
  }

  deleteName = (id) => {
    console.log("ID object", id);

    this.state.names &&
      this.setState({
        names: this.state.names.filter((name) => name.id !== id),
      });
  };

  addName = (newName) => {
    this.setState({
      names: [newName, ...this.state.names],
    });
  };

  render() {
    return (
      <>
        <Form onSubmit={this.addName} names={this.state.names} />

        {/* Table */}
        <br />
        <table id="details">
          <tbody>
            <tr>
              <th>ID</th>
              <th>Names</th>
              <th>Operation</th>
            </tr>

            {/* Render dynamic rows
             */}
            {this.renderTable()}
          </tbody>
        </table>
      </>
    );
  }
}

您可以看到我尝试将数据呈现为表格，我们也可以删除行数据

form.js 文件是，

import React, { useState } from "react";
// import { uniqueId } from "lodash";

export default function Form(props) {
  const [name, setName] = useState("");
  const [id, setId] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    handleChangeandValidate();
  };

  const handleChangeandValidate = () => {
    const { onSubmit, names } = props;
    console.log("Object keys length", Object.keys(names).length);
    if (Object.keys(names).length !== 0) {
      names.map((name) => {
        if (name.id === id) {
          alert("Enter unique id");
          setId("");
          document.getElementById("ID").focus();
        } else {
          //if different id
          onSubmit({ id: id, name: name });

          setName("");
          setId("");
        }
        return null;
      });
    } else {
      onSubmit({ id: id, name: name }); // first time
      setName("");
      setId("");
    }
  };

  return (
    <form onSubmit={handleSubmit} id="myform">
      <label style={{ fontSize: "20px", fontWeight: "bold" }}>
        Name: {""}
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </label>{" "}
      <label style={{ fontSize: "20px", fontWeight: "bold" }}>
        ID: {""}
        <input
          type="number"
          onChange={(e) => setId(e.target.value)}
          required
          value={id}
          id="ID"
        />
      </label>
      {""}
      <input type="submit" value="Submit" />
    </form>
  );
}

你可以看到我已经尝试从父组件（app.js）获取状态和 onSubmit 函数并做了一些逻辑，比如比较所有的 ID，但是这个逻辑会抛出一些错误，请有人提出一个好的解决方案。 提前致谢！

Answer 1

我稍微修改了你的代码，这里是working example。

这是我所做的：

• 我使用createRef() 创建了两个引用，它们引用了名为nameInputRef 和idInputRef 的每个输入字段。
• 我添加了ref={nameInputRef} 和ref={idInputRef}，以便我们可以在提交时获取它们的值。
• 提交时，我使用他们的 refs 获取 name + id 的值。
• 为了搜索 ID 是否存在，我使用了Array.find()，如果来自 props 的名称列表中不存在相同的 ID，则返回 undefined。
• 在addName() 中，我使用了setState()，但在参数中我使用了一个函数来确保我得到最新的名称列表，因为更新状态是asynchronous。在里面，我还使用了ES6's destructuring feature 来复制当前列表，将新名称推送给它，然后使用新的名称列表更新状态。