React JS中如何获取textfield输入内容并生成指定结构的对象

方法1：受控组件实现（官方推荐，适用绝大多数场景） #

通过state同步输入框内容，随时可以拼装出目标结构的对象：

1. 声明state存储三个字段的输入值
2. 给每个输入框（或Material UI的TextField组件）绑定value关联对应state，同时绑定onChange事件同步输入内容
3. 需要生成对象时直接从state取值即可

完整代码示例：

import { useState } from 'react';
// 若使用Material UI的TextField，额外加导入：
// import TextField from '@mui/material/TextField';

function FormDemo() {
  const [formData, setFormData] = useState({
    Name: '',
    Age: '',
    City: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      // 年龄字段自动转数字类型，匹配目标结构要求
      [name]: name === 'Age' ? Number(value) : value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 生成的targetObj就是你需要的结构的对象
    const targetObj = {...formData};
    console.log(targetObj);
    // 后续可直接用该对象做接口提交、本地处理等操作
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 原生input写法 */}
      <input
        type="text"
        name="Name"
        value={formData.Name}
        onChange={handleChange}
        placeholder="输入姓名"
      />
      <input
        type="number"
        name="Age"
        value={formData.Age}
        onChange={handleChange}
        placeholder="输入年龄"
      />
      <input
        type="text"
        name="City"
        value={formData.City}
        onChange={handleChange}
        placeholder="输入城市"
      />
      {/* 若用Material UI的TextField，替换上述input即可，逻辑完全一致
      <TextField label="姓名" name="Name" value={formData.Name} onChange={handleChange} />
      <TextField label="年龄" type="number" name="Age" value={formData.Age} onChange={handleChange} />
      <TextField label="城市" name="City" value={formData.City} onChange={handleChange} />
       */}
      <button type="submit">生成对象</button>
    </form>
  );
}

export default FormDemo;

方法2：非受控组件实现（适合简单无需实时校验的场景） #

不需要state存值，提交时直接从DOM节点读取输入内容拼装对象：

import { useRef } from 'react';

function FormDemo() {
  const nameRef = useRef(null);
  const ageRef = useRef(null);
  const cityRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const targetObj = {
      Name: nameRef.current.value,
      Age: Number(ageRef.current.value),
      City: cityRef.current.value
    };
    console.log(targetObj);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} placeholder="输入姓名" />
      <input type="number" ref={ageRef} placeholder="输入年龄" />
      <input type="text" ref={cityRef} placeholder="输入城市" />
      <button type="submit">生成对象</button>
    </form>
  );
}

内容的提问来源于stack exchange，提问作者Victor