Html Event.target.name适用于输入，但不适用于div？

onBlur

handleBlur

函数为

input

标记输出

name

属性中的值，但为

div

标记输出

undefined

。为什么它不从

div

标记的

name

属性中输出值呢

import React, { Component } from "react";

export default class Editable extends Component {
  constructor(props) {
    super(props);
  }

  handleBlur(event) {
    console.log(event.target, event.target.name);
  }

  render() {
    return (
      <div>
        <div
          name={this.props.name}
          contentEditable={true}
          onBlur={this.handleBlur}
          dangerouslySetInnerHTML={{ __html: this.props.html }}
        />
        <input name={this.props.name} onBlur={this.handleBlur} />
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类可编辑扩展组件{
建造师（道具）{
超级（道具）；
}
车把（活动）{
日志（event.target、event.target.name）；
}
render（）{
返回(
);
}
}

没有

名称

属性。您可以有一个属性，但属性是另一个属性（详见下文）

另外，由于

this.props.name

的值为空，因此React不会呈现该属性，这会使您获得

null

，即使您尝试获取该属性也是如此。因此，请尝试向属性添加一些值，并记录

event.target.getAttribute（'name'）

，如下所示：

 handleBlur(event) {
    console.log(event.target, event.target.name);
    console.log(event.target, event.target.getAttribute('name'));       // added this
  }

  render() {
    return (
      <div>
        <div
          name={this.props.name + "SOMETHING"}                         // added this
          contentEditable={true}
          onBlur={this.handleBlur}
          dangerouslySetInnerHTML={{ __html: this.props.html }}
        />
        <input name={this.props.name} onBlur={this.handleBlur} />
      </div>
    );
  }

<div name=​"undefinedSOMETHING" contenteditable=​"true">​</div>​ undefined
<div name=​"undefinedSOMETHING" contenteditable=​"true">​</div>​ "undefinedSOMETHING"