Question

onBlur handleBlur函数输出name标记的input属性值，但undefined标记输出div。为什么它也不会从name标记的div属性中输出值？

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>
    );
  }
}

Answer 1

<div>没有name 属性。您可以拥有一个属性，但属性是另一个属性（更多信息如下）。

此外，由于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"

有关div和name属性的更多信息：

console.log(document.getElementById("d").name)
console.log(document.getElementById("i").name)
console.log('---');
console.log(document.getElementById("d").getAttribute('name'))
console.log(document.getElementById("i").getAttribute('name'))

<div id="d" name="alice"></div>
<input id="i" name="bob">

文档：

HTMLInputElement：有一个name属性。
HTMLDivElement：所有属性都是继承的，其父级（HTMLElement）也没有name。

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

1 个答案: