您可以通过为measurements创建一个状态来实现这一点。这允许React在用户在输入中键入内容时重新呈现UI。我将measurementData代码移到组件外部，如果这是动态的，您可以简单地将其放回原处。
当Map到measurements来渲染它们时，我们为输入提供一个value属性，并传递当前测量值。如果还没有值，我们默认为0。

import { useState } from "react";

const measurementData = {
  id: 301,
  name: "Topwear",
  measurements: [
    { id: 1, name: "neck" },
    { id: 2, name: "shoulder" },
  ],
};

export default function App() {
  // create the state
  const [measurements, setMeasurements] = useState(
    measurementData.measurements
  );

  // create the onChange handler
  const handleOnChange = (e) => {
    const value = e.target.value;
    const name = e.target.name;
    setMeasurements((prevState) => {
      // map over the prev measurements
      return prevState.map((measurement) => {
        // if the name is not the same just return the measurement
        if (measurement.name !== name) return measurement;
        // else return a new object with the prev measurement and the new value
        return {
          ...measurement,
          value: value,
        };
      });
    });
  };

  return (
    <div className="App mt-5">
      <h1>Update Measurement Data</h1>
      {measurements.map((measurement) => {
        return (
          <div className="d-flex">
            <label className="col-form-label">{measurement.name}</label>
            <input
              type="number"
              name={measurement.name}
              value={measurement.value ?? 0}
              onChange={handleOnChange}
              className="form-control"
            />
          </div>
        );
      })}
    </div>
  );
}