React 输入失去对变化的关注

Question

React 输入在每次更改时都会失去焦点。我知道，如果我直接将我的 Input 函数移动到 map 中，它就会正常工作。但我想让它成为一个可重用的组件。这是link：https://codesandbox.io/s/weathered-violet-j6gv14?file=/src/inputs.js

import React, { useState } from "react";

export default function Inputs({ inputs, setInputs }) {
  function handleAdd() {
    setInputs([...inputs, { input1: "", input2: "" }]);
  }
  function handleChange({ value, index, name }) {
    const tempInputs = [...inputs];
    tempInputs[index][name] = value;
    setInputs(tempInputs);
  }
  function Input({ index, input, ...props }) {
    return (
      <div {...props}>
        <input
          type="text"
          value={input["input1"]}
          onChange={(e) =>
            handleChange({
              value: e.target.value,
              index: index,
              name: "input1",
            })
          }
        />
        <input
          value={input["input2"]}
          onChange={(e) =>
            handleChange({
              value: e.target.value,
              index: index,
              name: "input2",
            })
          }
        />
      </div>
    );
  }
  return (
    <div>
      <button onClick={handleAdd}>Add</button>
      <ul>
        {inputs.map((input, index) => {
          return <Input key={index} index={index} input={input} />;
        })}
      </ul>
    </div>
  );
}

Answer 1

您需要将 Input 函数移到 Inputs 之外，将其作为一个单独的组件并在那里传递 handleChange 回调。

它发生了，因为当你改变输入时，React re-renders 组件并且因为你的函数在组件内部也是 re-rendered，但你实际上并不需要它。

import React from "react";

function Input({ index, input, handleChange, ...props }) {
  return (
    <div {...props}>
      <input
        type="text"
        value={input["input1"]}
        onChange={(e) =>
          handleChange({
            value: e.target.value,
            index: index,
            name: "input1"
          })
        }
      />
      <input
        type="text"
        value={input["input2"]}
        onChange={(e) =>
          handleChange({
            value: e.target.value,
            index: index,
            name: "input2"
          })
        }
      />
    </div>
  );
}

export default function Inputs({ inputs, setInputs }) {
  function handleAdd() {
    const tempInputs = [...inputs];
    tempInputs.push({ input1: "", input2: "" });
    setInputs(tempInputs);
  }
  function handleChange({ value, index, name }) {
    const tempInputs = [...inputs];
    tempInputs[index][name] = value;
    setInputs(tempInputs);
  }

  return (
    <div>
      <button onClick={handleAdd}>Add</button>
      <ul>
        {inputs.map((input, index) => {
          return (
            <Input
              key={index}
              handleChange={handleChange}
              index={index}
              input={input}
            />
          );
        })}
      </ul>
    </div>
  );
}

https://codesandbox.io/s/little-brook-7iiiqw?file=/src/inputs.js

React 输入失去对变化的关注

React input loses focus on change

state

focus

input

reactjs