React中在onChange处理器中获取HTML标签data属性的问题

1. 核心语法错误：访问data属性的方式不对 #

HTML中的data-*自定义属性，不能直接通过event.target.inputName访问——你得通过DOM元素的dataset对象来获取，而且属性名会自动转为驼峰式：比如data-input-name对应dataset.inputName。

2. setState的语法错误 #

你写的代码里，setState的括号使用有误：计算属性需要放在对象的大括号内部，而且要正确包裹。原代码里的[event.target.inputName]: ...外面少了一层大括号，加上属性访问本身的错误，导致代码无法正常运行。

修正后的代码 #

先改handleInputChange方法：

handleInputChange = (event) => {
  // 解构简化代码，同时获取目标元素和对应data属性
  const { target } = event;
  const inputName = target.dataset.inputName;
  
  // 临时调试用：确认能拿到正确的属性和值（之后可以删掉）
  console.log('当前输入框标识：', inputName);
  console.log('当前输入值：', target.value);

  // 正确的setState写法，用计算属性更新对应state字段
  this.setState({
    [inputName]: target.value
  });
}

对应的JSX不需要修改，保持原有data-input-name配置即可：

<input 
  onChange={this.handleInputChange}
  type="text"
  data-input-name="name"
  value={this.state.name}
/>

调试技巧：如何确认data属性是否能被访问？ #

如果后续再遇到类似DOM属性访问的问题，可以用这几个方法排查：

• 在事件处理器里第一行加console.log(event.target.dataset)，打开浏览器控制台就能看到所有data-*属性的键值对；
• 右键点击输入框选「检查」打开DevTools，在Elements面板选中该input元素，右侧「Properties」面板里找dataset对象，里面会列出所有自定义的data属性；
• 在控制台选中元素后，直接输入$0.dataset（$0代表当前选中的DOM元素），能快速查看它的dataset内容。

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