在 React 中处理未知数量的输入

Question

我正在创建一个反应元素，允许用户向朋友/家人发送电子邮件。 该元素默认为 3 个输入字段，但是用户可以单击按钮添加其他输入字段。

我构建此组件的想法是有一个递增计数器的按钮，然后使用该计数器值运行循环并将项目添加到数组

<button onClick={handleAddEmail}> Add email </button>

function handleAddEmail() {
  setNumberOfEmails(numberOfEmails + 1);
    }

现在要让它工作，我需要一个NumberOfEmails挂钩。 该挂钩将使用前三个输入字段进行初始化。

 const [numberOfEmails, setNumberOfEmails] = useState(3);

此外，还有一个inviteEmails挂钩来处理每个输入的 state。

const [inviteEmails, setInviteEmails] = useState([])

所有这些输入都应在 function 中呈现：

function renderEmailFields() {
    const emailContainer = [
        <input 
          value={inviteEmails[0]}
          onChange={(e) => handleEmailChange(0, e)}
          placeholder="Enter email here..."
        />,
       <input 
          value={inviteEmails[1]}
          onChange={(e) => handleEmailChange(1, e)}
          placeholder="Enter email here..."
        />,
       <input 
          value={inviteEmails[2]}
          onChange={(e) => handleEmailChange(2, e)}
          placeholder="Enter email here..."
        />];
        for (let i = 3; i < numberOfEmails; i++) {
            emailContainer.push(
                <input
                    value={inviteEmails[i]}
                    onChange={(e) => handleEmailChange(i, e)}
                    placeholder="New email..."
                />
            );
        }
        return emailContainer;

我上面的代码接近工作，但是添加一个新的输入字段会导致以前的输入锁定并变得不可编辑。

任何意见，将不胜感激。

Answer 1

如果你问我，你真的不需要第二个 state 原子来表示输入的数量。

在此处查看实时 CodeSandbox 。

• useCallback和dataset魔术使它成为现实，因此您不需要为每个输入单独的onClick处理程序 function。
• .filter(Boolean)删除所有虚假值； 空字符串是假的。
• 说到底，这还可以让您从数组中删除项目。

function App() {
  const [inviteEmails, setInviteEmails] = React.useState(["", "", ""]);
  const handleEmailChange = React.useCallback((event) => {
    const index = parseInt(event.target.dataset.index, 10);
    setInviteEmails((inviteEmails) => {
      const newInviteEmails = [...inviteEmails];
      newInviteEmails[index] = event.target.value;
      return newInviteEmails;
    });
  }, []);
  const removeEmail = React.useCallback((event) => {
    const index = parseInt(event.target.dataset.index, 10);
    setInviteEmails((inviteEmails) => {
      const newInviteEmails = [...inviteEmails];
      newInviteEmails.splice(index, 1);
      return newInviteEmails;
    });
  }, []);
  const addEmail = React.useCallback(
    () => setInviteEmails((inviteEmails) => [...inviteEmails, ""]),
    []
  );

  return (
    <div>
      {inviteEmails.map((email, index) => (
        <div key={index}>
          <input
            value={email}
            data-index={index}
            onChange={handleEmailChange}
            placeholder="Enter email here..."
          />
          <button onClick={removeEmail} data-index={index}>
            &times;
          </button>
        </div>
      ))}
      <button onClick={addEmail}>Add email</button>
      <pre>{JSON.stringify(inviteEmails.filter(Boolean), null, 2)}</pre>
    </div>
  );
}