reactjs - React 输入失去了对变化的关注

Question

react 输入失去了对每个变化的关注。 我知道如果我直接将输入函数移到 map 内，它就会正常工作。但我想让它成为一个可重用的组件。 这是链接: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 会重新渲染组件，并且由于您的函数位于组件内部，因此组件也会重新渲染，但您实际上并不需要它。

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