React動態表單輸入useReftypeError-有解無憂

我有一個帶有動態輸入欄位的 React 表單，用戶可以添加和洗掉輸入欄位。我在提交表單時進行驗證。如果 input 為空，則 input 使用 useRef 鉤子聚焦。問題是，如果我有兩個輸入為空，所以我添加第二個輸入并在之后將其洗掉，我得到 typeError“無法讀取 null 的屬性（讀取'焦點'）”。

React 動態表單輸入 useRef typeError

應用程式.js

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [fields, setFields] = useState([""]);

  const fieldRef = useRef();

  const fieldsIsValid =
    fields.length >= 1 && fields.every((field) => field.trim() !== "");

  function handleChange(i, event) {
    const values = [...fields];
    values[i] = event.target.value;
    setFields(values);
  }

  function handleAdd() {
    const values = [...fields];
    values.push("");
    setFields(values);
  }

  function handleRemove(i) {
    const values = [...fields];
    values.splice(i, 1);
    setFields(values);
  }

  function submitHandler(event) {
    event.preventDefault();

    if (!fieldsIsValid) {
      if (fields.length >= 1) {
        fieldRef.current.focus();
        return;
      }
      return;
    }
    console.log(fields);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <form onSubmit={submitHandler}>
        <button type="button" onClick={() => handleAdd()}>
          Add Input
        </button>
        {!fieldsIsValid && <p className="error">Input is required</p>}
        {fields.map((field, idx) => {
          return (
            <div key={`${"input"}-${idx}`}>
              <input
                type="text"
                placeholder="Enter text"
                value={field || ""}
                ref={fieldRef}
                onChange={(e) => handleChange(idx, e)}
              />
              <button type="button" onClick={() => handleRemove(idx)}>
                X
              </button>
            </div>
          );
        })}
        <button className="margin-top" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

正如 Andreas 已經提到的，您需要為多個輸入創建多個 refs。React refs 到 DOM 節點總是存在一對一的映射/分配。如果您在多個位置使用相同的 ref，則ref將鏈接到您使用它的最后一個節點。為了幫助您理解這一點，請檢查您在此處遇到的錯誤。它說，“無法讀取null”的屬性，即fieldRef.currentDOM 節點 fieldRef 的最后一次映射（最后一個輸入欄位）在 DOM 樹中洗掉后不存在，因此值為 null。

您可以嘗試通過將 ref 放在表單標簽而不是輸入標簽上來實作相同的功能，如下所示：

<form onSubmit={submitHandler} ref={fieldRef}>

function submitHandler(event) {
    event.preventDefault();

    for (let elem of fieldRef.current.elements) {
      if (elem.type === 'text' && elem.dataset.required && !elem.value) {
        elem.focus()
        return
      }
    }
  }

<input
     type="text"
     data-required="true"    // <---- Add this here
     placeholder="Enter text"
     value={field || ""}
     onChange={(e) => handleChange(idx, e)}
 />

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/411233.html

標籤：

上一篇：角度動態輸入填充相同的值

下一篇：django表單non_field_errors自定義