如果不是输入，则事件目标的名称未定义

Question

我有这个组件：

...

onInputChange = evt => {
  const target = evt.target;
  let value = null;
  if (target.nodeName === "INPUT")
    value = target.value; //works well
  else if (target.nodeName === "SPAN")
    value = target.innerText; //works well
  const name = target.name; //works well if it's the input, doesn't if it's the span
  this.setState({[name]: value});
}

render() {
  ...
  <input name="myFirstValue" onChange={onInputChange} />
  <span name="mySecondValue" contentEditable="true" onInput={onInputChange}></span>
  ...
}

...

当它input触发事件时，它运行良好。但问题是当它是span:target.name返回undefined而不是'mySecondValue'.

这是 React 的错误吗？如果是这样，是否有解决方法？

感谢您的帮助。

Answer 1

您可以将“名称”属性放在您想要的任何元素上，但只有<form>“交互式”元素具有允许您将其视为 DOM 节点上的可获取/可设置属性的 DOM API。否则，您必须使用.getAttribute()和.setAttribute()（这也适用于<input>等）。

因此

const name = target.getAttribute("name");

或者可能

const name = target.name || target.getAttribute("name");