反應動態表單輸入

我有一個帶有動態輸入欄位的 React 表單，用戶可以添加和洗掉輸入欄位。當我提交表單時，我將每個輸入的值記錄在一個陣列中。問題是我無法連續輸入。當我輸入輸入時，我只能輸入一個字符并且它會聚焦。我該如何解決？

代碼沙盒

應用程式.js

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

import "./styles.css";

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

  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();
    console.log(fields);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <form onSubmit={submitHandler}>
        <button type="button" onClick={() => handleAdd()}>
          Add Input
        </button>

        {fields.map((field, idx) => {
          return (
            <div key={`${field}-${idx}`}>
              <input
                type="text"
                placeholder="Enter text"
                value={field || ""}
                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熱心網友回復：

用這個替換你的代碼

         <div key={`${"asdf"}-${idx}`}>
          <input
            type="text"
            placeholder="Enter text"
            value={field || ""}
            onChange={(e) => handleChange(idx, e)}
          />
          <button type="button" onClick={() => handleRemove(idx)}>
            X
          </button>
        </div>

uj5u.com熱心網友回復：

我使用了第三方去抖，你可以選擇任何你想要的

代碼

import React, { useState } from "react";
import AwesomeDebouncePromise from "awesome-debounce-promise";
import ReactDOM from "react-dom";

import "./styles.css";

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

  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);
 }

 const searchAPIDebounced = AwesomeDebouncePromise((event) => {
   console.log(fields);
 }, 100);

const submitHandler = async (event) => {
  event.preventDefault();
  const result = await searchAPIDebounced(event);
};

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <form onSubmit={submitHandler}>
      <button type="button" onClick={() => handleAdd()}>
        Add Input
      </button>

      {fields.map((field, idx) => {
        return (
          <div key={`${idx}`}>
            <input
              type="text"
              placeholder="Enter text"
              value={field || ""}
              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;

標籤：

上一篇：Laravel7-表單

下一篇：HTML可以在沒有任何內容的電子郵件中發送表單