输入字符 React 后输入失去焦点

Question

我已经尝试调试了好几个小时，并查看了具有相同问题风格的所有其他 Stack Overflow 问题，但他们都只是说要使用密钥，但这对我仍然不起作用。我制作了一个更简单的代码示例来复制错误。

    import React from 'react'
import { useState } from 'react'
const FormTest = () => {

    const [name, setName] = useState('')
    const TestExperience = (props) => {
        return (<div>
           <h1>Test Experience {props.num}</h1>
          <input 
           type="text" 
           name="name" 
           placeholder="Name"
            />
        </div>)
    }
    const processFormData = (event) => {
        event.preventDefault();
        console.log(event.target);
    }
    const [nums, setNums] = useState([1, 2, 3]);
    const arr = nums.map((num, index) => <TestExperience num={num} key={index}/>);

    return (
        <div>
            <form onSubmit={(event) => {
                processFormData(event);
            }}>
            {arr}
            
            <button onClick={() => {
                setNums([...nums, nums.length + 1]);
            }}>Add one!</button>
            </form>        
        </div>
    )
}

export default FormTest

我尝试将 TestExperience 移至它自己的独立函数。我试图基本上拥有可以创建更多的输入，而这个失去焦点的问题来自这样一个事实，即每次添加输入时，所有现有的 formData 由于重新渲染而消失。目标是只使用 onSubmit 函数来解析数据，但由于它在添加输入后消失了，我想我需要存储它。一个又一个兔子洞，我一直在尝试解决看似如此简单的问题，但每次尝试的实现都会遇到问题。

总体目标是我有一个提交按钮和一个添加输入按钮，我试图放弃整个 value={stateVariable} 和 onChange={setStateVariable} 的东西，只是让输入按钮成为“提交”按钮，所以我可以运行 processFormData 并根据它是哪个提交按钮来做不同的事情，但我不知道当有两个不同的按钮时如何检查提交来自哪个按钮，所以对此的答案也可能非常有帮助，因为那么我可以避免整个州的混乱。

Answer 1

您需要将TestExperience 移出FormTest。

import React from "react";
import { useState } from "react";

const TestExperience = (props) => {
  const [name, setName] = useState("");

  return (
    <div>
      <h1>Test Experience {props.num}</h1>
      <input
        type="text"
        name="name"
        placeholder="Name"
        onChange={(event) => {
          event.preventDefault();
          setName(event.target.value);
        }}
        value={name}
      />
    </div>
  );
};

const FormTest = () => {
  const processFormData = (event) => {
    event.preventDefault();
    console.log(event.target);
  };
  const [nums, setNums] = useState([1, 2, 3]);
  const arr = nums.map((num, index) => (
    <TestExperience num={num} key={index} />
  ));

  return (
    <div>
      <form
        onSubmit={(event) => {
          processFormData(event);
        }}
      >
        {arr}
        //another way I tried to do it below //
        {nums.map((num, index) => (
          <TestExperience num={num} key={index} />
        ))}
        <button
          onClick={() => {
            setNums([...nums, nums.length + 1]);
          }}
        >
          Add one!
        </button>
      </form>
    </div>
  );
};

export default FormTest;

代码沙箱 => https://codesandbox.io/s/trusting-elbakyan-mxrez?file=/src/App.js