在 onChange 处理程序中反应获取 html 标记上的数据属性答案

【问题标题】：React get data attributes on html tag in onChange handler在 onChange 处理程序中反应获取 html 标记上的数据属性
【发布时间】：2023-03-31 13:21:01
【问题描述】：

我想对一系列输入使用相同的 onChange 处理程序。

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

所以我试图使用这个 html 数据属性来存储输入的名称。当我在 JavaScript 中关闭属性时，我无法访问它。

handleInputChange = (event) => {
    this.setState([event.target.inputName]: event.target.value})
}

我尝试了一些排列都无济于事，而且似乎很难调试，因为当我登录 event.target 时，我只在 JavaScript 控制台中看到一个 html 元素。

关于如何更好地调试或我的语法哪里出错的任何建议？

【问题讨论】：

标签： reactjs

【解决方案1】：

我注意到您在setState 调用中遗漏了一个左大括号。当你运行它时会抛出一个语法错误。应该这样修复：

handleInputChange = (event) => {
    this.setState({[event.target.inputName]: event.target.value})
}

要从handleInputChange 访问您的数据属性，您可以这样做：

handleInputChange = event => {
  this.setState({
    [event.target.getAttribute('data-input-name')]: event.target.value,
  });
};

此外，您可以使用这些输入附带的默认名称属性，如下所示：

handleInputChange = event => {
  this.setState({
    [event.target.name]: event.target.value,
  });
};


// in your render fucntion
<input
  onChange={this.handleInputChange}
  type="text"
  name="name"
  value={this.state.name}
/>

这与使用数据属性相同。希望对您有所帮助！

【讨论】：

哦，太好了，.getAttribute 是 HtmlElement 对象类型 API 的函数部分吗？
是的，它是 DOM API 的一部分，据 React 核心团队成员之一说。 stackoverflow.com/a/20383295/1727948

【解决方案2】：

您可以将输入名称作为参数传递，而不是将其作为属性传递，如下所示：

<input onChange={(e) => this.handleInputChange(e,"someValue")}
    type="text"
    value={this.state.name}/>

然后

handleInputChange = (event, name) => {
    this.setState([name]: event.target.value})
}

【讨论】：

【解决方案3】：

我还能够找到一个有点肮脏的解决方案来从事件对象中提取值。

event.target.attributes['data-input-name'].value

【讨论】：