React中无法获取预期输入对象输出数据问题求助

问题核心是你在构建对象时，直接使用变量名作为键名，JS会将其解析为字符串字面量，而非变量的实际值。要实现动态键名，需要使用ES6的计算属性名语法。

错误写法示例： #

const handleChange = (e) => {
  const inputName = e.target.name;
  const inputValue = e.target.value;
  // 这里inputName会被当作字符串键，而非变量值
  const formData = { inputName: inputValue };
  console.log(formData); // 输出 {inputName: '输入值'}
};

正确写法： #

用方括号[]包裹变量，JS会将变量的求值结果作为对象的键名：

const handleChange = (e) => {
  const inputName = e.target.name;
  const inputValue = e.target.value;
  // 使用计算属性名，动态设置键名
  const formData = { [inputName]: inputValue };
  console.log(formData); // 输出 {username: 'bob'} 或 {password: 1234}
  
  // 如果是更新组件状态，通常会结合展开运算符保留原有数据：
  // setFormData(prevState => ({ ...prevState, [inputName]: inputValue }));
};

这样就能得到你预期的{username:"bob", password:1234}格式的对象了。

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